Trying to do window resize with jquery cycle slide

Question

I'm trying to run a JavaScript window resize script on a page with a jQuery cycle slideshow but I'm hitting some bugs I cant seem to work out. It resizes the first image fine on page load but then forgets the new height/width attributes for subsequent slides. I can set these again on before and after using jQuery but the images always flash in at full size for a brief moment before resizing.

Is jQuery.cycle resizing the slides back to their native size? If so how do I stop this?

$(document).ready(function () {
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 200,
    timeout: 1000,
    pause: 1,
    before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    },
    after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
      resize();
    }
  });

  $('.slideshow').find('img').css("height", "0");
  $('#image').hide().idle(1000).fadeIn();
  resize();
});

$(window).resize(function () {
  resize();
});

function resize() {

  var theheight = window.innerHeight;
  var thewidth = window.innerWidth;

  var imageheight = theheight - 200;

  if (imageheight > 540) {
    imageheight = 540;
  }
  if (imageheight < 300) {
    imageheight = 300;
  }

  var imagewidth = imageheight / 0.6585365;

  $(".slide").css("height", imageheight);
  $(".slide").css("width", imagewidth);
  $(".slide").attr("height", imageheight);
  $(".slide").attr("width", imagewidth);

}

Answer 1

no matter what i inserted into the cycle with option worked for me (tried '100%' or 'auto'), so i solved this problem via css

.slideshowContainer {
    width: auto !important;
}

btw. 100% !important would do the same trick. so the .slideshowContainer will take 100% width of the surrounding element..

Answer 2

It looks like cycle stores the slide container element's width and height once, when you first call it, and then sets the incoming slide to those dimensions no matter what your resize script is doing.

I had the same issue recently: the combination of the options

$slideshow.cycle({ 
  containerResize: false,
  slideResize: false,
  fit: 1
});

and

.yourslide { width: yourwidth !important }

worked for me. The key was the fit:1 -- the way the docs describe it make it seem like exactly what I didn't want, but it created the desired effect. Can't explain it, unfortunately.

Answer 3

This worked for me in similar circumstances:

$(window).resize(function(){
$('.lr-slider').each(function(){
    newWidth = $(this).parent('div').width()
    $(this).width(newWidth)
    $(this).children('div').width(newWidth)
})
})

Points to note:

1. .lr-slider is the div contianing the slides, this is amde to support mulitple sldieshows
2. In this case, .lr-slider inherits it's width from it's parent element in css, so I'm recreating this in jQuery on a window resize event
3. The slides are all div elements, without classes or id's. You may prefer to make this more trargeted for your own use, so you can explicitly refer to a class.

Answer 4

Does this work for you?

In your options, add this:

cssBefore: {  
    top:  0, 
    left: 0, 
    width: wwidth, 
    height: wheight,  
    zIndex: 1  
}

And for resize, add a few variables to match that get set on a resize:

var wheight, wwidth;
function resize() {
  wheight = Math.Min(window.innerHeight - 200, 540);
  wwidth = Math.Min(window.innerWidth, 300) / 0.6585365;
  $(".slide").width(wwidth).height(wheight);
});

No need to call this in before: and after: anymore, just once onload and in $(window).resize().

Answer 5

Thanks Nick, that was a step in the right direction. Ive managed to get it to work with the below. Oddly it doesnt work if I dont have animIn: height/width set to a different value than they are in cssBefore: Any ideas on that?

 $('.slideshow').cycle({ 
    fx: 'custom', 
    speed: 200,
    timeout : 1000,
    pause:  1,
    cssBefore: {  
       left: 0,  
       top:  0,  
       width: imagewidth,  
       height: imageheight,  
       opacity: 0, 
       zIndex: 1 
   }, 
   animOut: {  
       opacity: 0  
   }, 
   animIn: {  
       left: 0,  
       top:  0,  
       width: imagewidth +1,  
       height: imageheight +1,  
       opacity: 1, 
       zIndex: 1  
   }, 
   cssAfter: {  
       zIndex: 0 
   }
});