Я создаю пользовательскую реализацию jquery Infinite Carousel на сайте wordpress, http://cambridgeuplighting.com/scale-test. Я хочу дать моему клиенту возможность добавлять фотографии любого разрешения и изменять размер элемента контейнера. Я собираюсь использовать тот же анимированный эффект изменения размера, как в Lightbox/Slimbox или SimpleViewer.Создание функции изменения размера контейнера в jQuery Infinite Carousel
У меня есть ОК начало, но есть некоторые недостатки в коде. Вот модификация функции «thumbClick» в 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);
Вот код, который я добавил к своим собственным init.js установить атрибут отн литиево элементы их значение индекса
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 onClick, мне нужно установить их правильно, когда страница загружается.
Благодарим за помощь!