Creating container resize function in jQuery Infinite Carousel

Question

I'm creating a custom implementation of jquery Infinite Carousel on a wordpress site, http://cambridgeuplighting.com/scale-test. I want to give my client the option to add photos of any resolution and have the container element resize to fit it. I'm going for the same animated resize effect as in Lightbox/Slimbox or SimpleViewer.

I have got an OK start, but there are some flaws in the code. Here is the modification to the "thumbClick" function in infinitecarousel.js`

//Get the rel attribute of the thumbnail (this is set to the index # of the thumbnail)
var activeLi = $(this).attr('rel');
//Find the Li elemement whose rel attribute (set to the initial index # of the li element onLoad) matches that of the thumbnail, so we can know which image is active
var whichLi = $('#singleSlide ul li[rel='+activeLi+']');
var whichLiImg = $('#singleSlide ul li[rel='+activeLi+'] img');
//Get the width and margin necessary to resize and center the container element
var activeImgWidth = whichLi.width();
var activeImgMargin = 628-activeImgWidth;
//Set the Width attribute of the Li element equal to that of the image it contains
whichLi.css( { 'width' : activeImgWidth } );
//Animate the width of the container element (the div with the gray border)
$('div#singleSlide').animate( { 
     width: activeImgWidth, 
     marginLeft: activeImgMargin/2
     },300);

Here is the code that I added to my own init.js to set the li elements' rel attribute to their index value

jQuery(function( $ ){
 $("#singleSlide ul").each(function() {
     $(this).children("li").each(function(i) {
         $(this).attr("rel", i);
     });
 });

 $('#singleSlide ul li a').attr('rel', 'lightbox-gallery');
});

So as you can see on the test page: cambridgeuplighting.com/scale-test, This code is not selecting the correct images with the correct widths to resize to. I know one problem i need to fix is instead of setting the Li widths onClick, I need to set them right when the page loads.

Thanks for your help!

Answer 1

In my opinion you should create a variable that reads the size of the image and a class that modifyes the size of the container according to the size of the picture :D