user1756847 user1756847 - 2 months ago 44
CSS Question

SlidesJS Auto height issue

I've ran into an issue here using the SlidesJS slider for a wordpress site with multiple slideshows being loaded via ajax to the same page ( not running at the same time ) with the AutoHeight value. I managed to get the AutoHeight to work by option, and it actually works, it just doesn't work with the first image of the slideshow. The first image doesn't appear at the first time loading. When clicking next, or waiting till the Slideshow does this automatically everything works with the other images.

I guess that's because when the slider first time loads the height is 0 ?!

I can't use a fixed CSS height for the slider, I tried using the max-height value, which didn't work, it will fallback on a fixed height for the slider this way. height auto in css doesn't work as well obviously. Does anybody know a way to work around this problem ? It is just the first image that doesn't load properly.

I will paste the CSS and Javascript of the code bellow

initializePortSlider=function(){
if($().slides) {

var portSliderPreloader = $('#portfolio-slider').attr('data-loader');

$("#portfolio-slider").slides({
preload: true,
preloadImage: portSliderPreloader,
play: 5000,
pause: 2500,
hoverPause: true,
autoHeight: true,
container: 'portfolio-slider-wrap',
effect: 'fade',
next: 'gallery-next',
prev: 'gallery-prev',
crossfade: true,
generatePagination: false
});

}
};
initializePortSlider();


The CSS for the slider

#portfolio-slider {
position: relative;
width: 588px;
line-height: 1;
padding-top:10px;
padding-bottom:10px;}

#portfolio-slider .portfolio-slider-wrap {
position: relative;
width: 588px;}

.portfolio-slider-wrap a,
.portfolio-slider-wrap img {
display: block;
width: 588px;
height:auto;}

Answer

If I get this right when the slideShow loads only the first image gets height 0.

you can fix this several ways:

css:

.portfolio-slider-wrap img:first-child {
   height: auto or 100%;
}

if that wont work you can do this the javscript way:

$('.portfolio-slider-wrap').find('img').each(function(i, obj){
  if (obj.clientHeight <= 0){
      obj.style.height = obj.offsetParent.clientHeight + 'px';
  }
});

add this code right after the init of the slide show.

Comments