Создание функции изменения размера контейнера в jQuery Infinite Carousel - PullRequest
Новая
       38

Создание функции изменения размера контейнера в jQuery Infinite Carousel

0 голосов
/ 07 февраля 2010

Я создаю пользовательскую реализацию jquery Infinite Carousel на WordPress-сайте, http://cambridgeuplighting.com/scale-test. Я хочу дать своему клиенту возможность добавлять фотографии любого разрешения и изменять размер элемента контейнера в соответствии с ним. Я собираюсь использовать тот же анимированный эффект изменения размера, что и в Lightbox / Slimbox или SimpleViewer.

У меня все нормально, но в коде есть некоторые недостатки. Вот модификация функции «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, чтобы установить для атрибута rel элементов li значение индекса 

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, мне нужно установить их правильно при загрузке страницы.

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 28 апреля 2010

По моему мнению, вы должны создать переменную, которая читает размер изображения, и класс, который изменяет размер контейнера в соответствии с размером изображения: D

...