Несколько слайд-шоу JQuery на 1 странице - PullRequest
Новая
       27

Несколько слайд-шоу JQuery на 1 странице

0 голосов
/ 27 марта 2011

jsfiddle здесь (обновлено)

У меня есть наборы изображений (например, альбом), которые я хочу отобразить на одной странице.Итак, у меня есть блок с одной миниатюрой для каждого альбома, и я использую jquery, чтобы развернуть блок и заменить миниатюру слайд-шоу всех изображений для этого альбома. 

<div class="slideshowContainer">
  <div class="slide"><img /></div>
  <div class="slide"><img /></div>
</div>

jquery вставляет div «slideInner»вокруг всех слайдов, чтобы провести их в сторону. В этом и заключается проблема. Поскольку на странице есть несколько экземпляров слайд-шоу, оно оборачивает все элементы div с классом «slide», а не только для этого альбома.эффективно вытягивая все изображения в слайд-шоу для одного альбома и оставляя все остальные пустыми.

HTML генерируется PHP, поэтому, хотя я могу добавить уникальный класс для каждого слайд-шоу, я не обязательно знаюзначение.

РЕДАКТИРОВАТЬ: я обновил код, чтобы при щелчке вызывать скрипт слайд-шоу как функцию, и собирал сгенерированный php идентификатор для этого элемента, используя $ this на элементе clicked. Теперь в слайд-шоу распознавались только правильные изображения.для этого альбома, но теперь есть 2 новых выпуска:

1.) ширина тdiv 'slideInner' теперь вычисляется слишком широко, и поэтому он продолжает позволять вам перемещать позицию, даже при том, что есть только количество div 'слайдов.

2.) странные вещи случаются, когда выуменьшите масштаб коробки, а затем снова откройте ее.Я предполагаю, что это потому, что функция Slideshow теперь вызывается дважды для одного и того же элемента.Как мне прекратить / сбросить функцию, когда окно закрыто?

1 Ответ

1 голос
/ 27 марта 2011

Я думаю, вы должны просто создать функцию для инициализации различных альбомов и присвоить ей идентификатор, чтобы выбрать только нужные слайды. 

 function initAlbum(id){   
    var slides = $('#'+id+' .slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slideshowContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div
   slides.wrapAll('<div class="slideInner"></div>')....

и на документе готов сделать что-то вроде 

$(".galleryimage-box").each(function(index, element){
    initAlbum(element.id);
});

Но вам также нужно найти другое решение для переменных currentPosition, которое не является глобальным для всего альбома. Вероятно, лучше добавить класс к видимому изображению и таким образом отслеживать, какой из них выбран (а также получать индекс, который является списком слайдов).

...