0

我正在 wordpress 网站http://cambridgeuplighting.com/scale-test上创建 jquery Infinite Carousel 的自定义实现。我想让我的客户选择添加任何分辨率的照片并调整容器元素的大小以适应它。我将使用与 Lightbox/Slimbox 或 SimpleViewer 中相同的动画调整大小效果。

我有一个好的开始，但代码中存在一些缺陷。这里是对infinitecarousel.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 宽度，而是需要在页面加载时正确设置它们。

谢谢你的帮助！

4

1 回答 1

-2

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

于 2010-04-27T22:34:17.127 回答