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 = wind…

Accepted Answer

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 
   }
});
```

Trying to do window resize with jquery cycle slideshow

Solution

Problem

Related problems