jquery - jssor slider: vertical-align images – flexslider used instead -

jquery - jssor slider: vertical-align images – flexslider used instead -

i have full-page jssor slider. pictures scaled 'cover' they're cutting off on bottom if they're tall.

i able specify each image whether should vertically centered or bottom-aligned (or default top-aligned), can create sure of import parts of each image showing.

i've tried vertical-align styles on div containing img no luck.

then i've tried calculating required offset , applying negative margin-top images tall – code below. works @ total width, pushes pictures high when resize window below width – leaving blank space on bottom. haven't been able figure out how stop happening.

has gotten work? there built-in functionality i've missed?

html (i add together show-bottom class on relevant slides):

<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1200px; height: 900px; display: none;"> <!-- slides container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1200px; height: 900px; overflow: hidden;"> {% slide in slides %} <div><img class="slide-image show-bottom" u="image" src="/site_media/{{ slide }}" /></div> {% endfor %} </div> </div>

js:

var options = { $slideduration: 700, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $dragorientation: 1, //[optional] orientation drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value 1 (note $dragorientation should same $playorientation when $displaypieces greater 1, or parking position not 0) $autoplay: true, //[optional] whether auto play, enable slideshow, alternative must set true, default value false $autoplayinterval: 4000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $slideeasing: $jssoreasing$.$easeinquart, $arrowkeynavigation: true, //[optional] allows keyboard (arrow key) navigation or not, default value false $pauseonhover: 0, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, 4 freeze desktop, 8 freeze touch device, 12 freeze desktop , touch device, default value 1 $fillmode: 2, //[optional] way fill image in slide, 0 stretch, 1 contain (keep aspect ratio , set within slide), 2 cover (keep aspect ratio , cover whole slide), 4 actual size, 5 contain big image, actual size little image, default value 0 }; var jssor_slider1 = new $jssorslider$("slider1_container", options); //responsive code begin //you can remove responsive code if don't want slider scales while window resizes function scaleslider() { var windowwidth = $(window).width(); if (windowwidth) { var windowheight = $(window).height(); var originalwidth = jssor_slider1.$originalwidth(); var originalheight = jssor_slider1.$originalheight(); var scalewidth = windowwidth; if (originalwidth / windowwidth > originalheight / windowheight) { scalewidth = math.ceil(windowheight / originalheight * originalwidth); } jssor_slider1.$scalewidth(scalewidth); // added bit: // adjust vertical alignment $( '.slide-image.show-bottom').each(function() { var $this = $(this) if ($this.height() > windowheight) { $this.css('margin-top', windowheight - $this.height()) } }) // end vertical alignment } else window.settimeout(scaleslider, 30); } scaleslider(); $(window).bind("load", scaleslider); $(window).bind("resize", scaleslider); $(window).bind("orientationchange", scaleslider); //responsive code end

update: seems have height: 900px; set on img. height jquery finds .height(), regardless of actual height jssor has applied. how actual height after jssor has scaled it? seems crux.

2 ways fill , align image in jssor slider.

auto filling/alignment specifying $fillmode alternative , specifying u="image" image element. (e.g. <img u="image" ...) manual filling/alignment removing u="image" image element , specifying css image element. (e.g. <img style="position: relative; top: ...px; left: ...px; width: ...px; height: ...px; ..." src=...)

to retrieve original size , scaled size of slider, please utilize next api.

$scalewidth() //formerly known $getscalewidth() //retrieve scaled width slider displays $scalewidth(width) //formerly known $setscalewidth(width) //scale slider new width , maintain aspect ratio $scaleheight() //formerly known $getscaleheight() //retrieve scaled height slider displays $scaleheight(height) //scale slider new height , maintain aspect ratio $originalwidth() //formerly known $getoriginalwidth() //retrieve original width of slider $originalheight() //formerly known $getoriginalheight() //retrieve original height of slider

reference: http://www.jssor.com/development/reference-api.html

jquery css flexslider jssor