Trying to do window resize with jquery cycle slideshow

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

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 2

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.