JQuery Cycle Plugin - Variable / Resize Height

Question

I've been trying to recreate something similar to the cycle plugin as used on http://www.brianrea.com/Progress-drawings.

I basically require pagination and require the container to resize / adjust its height based on the height of the image, with a smooth animation. The width is static.

Tried looking through the documentation for the plugin but it's not very specific and there are no demos (that I could find) on this functionality.

Could anyone point me in the right direction?

I've got something at the moment like:

$('#feature').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#previous', 
    next:   '#next',
    width:   660,
    after:   onAfter, 
    timeout: 0 
});

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#previous')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}

Answer 1

I think you can do that with the before callback function and a little css-transition magic:

http://jsfiddle.net/vPJCv/2/

HTML

<a href="#" id="prev">&larr;</a>
<a href="#" id="next">&rarr;</a>

<div id="slideshow">
 <img src="http://flickholdr.com/500/200/sea,sun/1">
 <img src="http://flickholdr.com/500/400/sea,sun/2">
 <img src="http://flickholdr.com/500/500/sea,sun/3">
 <img src="http://flickholdr.com/500/300/sea,sun/4">
 <img src="http://flickholdr.com/500/400/sea,sun/5">
</div>​

JS

$(document).ready(function(){

    $('#slideshow').cycle({
        before : function(currSlideElement, nextSlideElement){
          $('#slideshow').css('height', $(nextSlideElement).height()+'px');
        },
        timeout : 0,
        prev : $('a#prev'),
        next : $('a#next')
    });

});

CSS

#slideshow{
  border-bottom: 2px solid #000;
  padding: 10px;
  -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
          transition: all .2s ease;
}​