Jquery Cycle Resize

Question

I am trying to get Jquery Cycle to resize. So far I have been partly successful, it resizes but the slide transition is buggy... I can't understand why? Here's the whole page http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html

I've managed to get the slideshow to resize following this article over at Sitepoint. By using slideResize: false in the javascript and assigning !important tags to the % width and % height of the CSS, the slideshow resizes according to the percentage values in my stylesheet.

The slideshow doesn't transition properly but it scales! Can anyone offer any suggestions? I thought it might have something to do with writing overflow: hidden to the slideshow in the CSS.

HTML

<div id="leftnav">
    <div class="slideshow">
        <img src="work/japan_11.03/hope_for_japan_1.jpg" class="a" alt="Japan 11/03: Title page" />
        <img src="work/japan_11.03/hope_for_japan_2.jpg" class="a" alt="Japan 11/03: Land of the rising sun" />
        <img src="work/japan_11.03/hope_for_japan_3.jpg" class="a" alt="Japan 11/03: Fishing for inspiration" />
        <img src="work/japan_11.03/hope_for_japan_4.jpg" class="a" alt="Japan 11/03: A little place called home" />
        <img src="work/japan_11.03/hope_for_japan_5.jpg" class="a" alt="Japan 11/03: Shinkasen" />
        <img src="work/japan_11.03/hope_for_japan_6.jpg" class="a" alt="Japan 11/03: Getting back into the swing of things" />
        <img src="work/japan_11.03/hope_for_japan_7.jpg" class="a" alt="Japan 11/03: Remembered and not forgotten" />
</div>

Javascript

$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'fade',
sync: true,     
    speedIn:  500,  
speedOut:  500,  
timeout: 10000,
pager:  '#nav',
next:   '.slideshow',
slideResize: false,
});
});

CSS

//image class properties
img.a { 
    min-width: 475.2px;
    max-width: 1342px;
    height: 92.58%;
}

//slideshow properties
.slideshow { 
    width: 92.58% !important ; 
    margin-left:7%; 
    overflow: hidden;  
}

.slideshow img { 
    height: auto !important ; 
    width: 92.58% !important; 
    position: relative !important; 
    padding: 0px; 
    background-color: #fcfcfc; 
}


.pics {  
    padding: 0;  
    margin:  0;
} 

.pics img {  
    padding: 0px;   
    background-color: #fcfcfc;  
    top:  0; 
    left: 0;
}

Answer 1

I was able to do this by destroying and recreating the cycle, updating the width and height field based on the container and images within there (images were dynamically sized to the container width).

Here's my JS. Probably not the best, and I think I can take the slideResize and fit fields out of the options, but it did work.

$(function(){

    var opts = {
        fx: 'scrollHorz',
        pause: 1,
        timeout: 5000,
        slideResize: 0,
        fit:1
    }

    $("#slideshow").cycle(opts);

    $(window).resize(function(){
        opts.width = $("#slideshow").width();
        opts.height = $("#slideshow img:first-child").height();
        $("#slideshow").cycle('destroy');
        $("#slideshow").cycle(opts);
    });

});

Answer 2

var opts = {
fx:     "fade",
speed:   400,
timeout: 3000,
next:   "#next",
prev:   "#prev",
}
$("#gallery,#gallery .slide").attr("style","")
$("#gallery").cycle("destroy");
$("#gallery").cycle(opts);