title: Trying to do window resize with jquery cycle slideshow
body: <p>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.</p>
  
  <p>Is jQuery.cycle resizing the slides back to their native size? If so how do I stop this?</p>
  
  <pre><code>$(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 &gt; 540) {
      imageheight = 540;
    }
    if (imageheight &lt; 300) {
      imageheight = 300;
    }
  
    var imagewidth = imageheight / 0.6585365;
  
    $(".slide").css("height", imageheight);
    $(".slide").css("width", imagewidth);
    $(".slide").attr("height", imageheight);
    $(".slide").attr("width", imagewidth);
  
  }
  </code></pre>