在jQuery无限旋转木马中创建容器大小调整函数

我正在wordpress网站上创建jquery无限旋转木马的自定义实现。我想让我的客户选择添加任何分辨率的照片，并调整容器元素的大小以适应它。我将使用与Lightbox/Slimbox或SimpleViewer中相同的动画调整效果

我有一个好的开始，但是代码中有一些缺陷。下面是对InfiniteCaruel.js中thumbClick函数的修改

//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);

下面是我添加到自己的init.js中的代码，用于将li元素的rel属性设置为它们的索引值

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

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

因此，正如您在测试页面上看到的：cambridgeuplighting.com/scale-test，此代码没有选择具有正确宽度的正确图像来调整大小。我知道我需要解决的一个问题是，我需要在页面加载时正确设置Li宽度，而不是在单击时设置Li宽度

---

谢谢你的帮助

在我看来，您应该创建一个读取图像大小的变量和一个根据图片大小修改容器大小的类：D