Question

我正在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，此代码未选择具有正确宽度的正确图像来调整大小。我知道我需要解决的一个问题是在onClick上设置Li宽度，而不是在页面加载时设置它们。

感谢您的帮助！

Answer 1

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

在jQuery Infinite Carousel中创建容器大小调整功能

1 个答案: