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.