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

发布于 2024-08-20 13:11:46 字数 1696 浏览 6 评论 0原文

我正在 WordPress 网站 http://cambridgeuplighting.com/scale- 上创建 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 宽度。

感谢您的帮助！

原文

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!

分享到QQ

分享到微博