слайдер изображений с помощью миниатюры - PullRequest
Новая
       8

слайдер изображений с помощью миниатюры

0 голосов
/ 20 июня 2011

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

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

Я настроил jsfiddle, если кто-то может мне помочь? сначала вы можете видеть, что next и previous будут переключать изображения, но как только вы нажмете на миниатюры и попробуете next и previous, это не изменит изображения

http://jsfiddle.net/aQTZ9/14/

Спасибо!

РЕДАКТИРОВАТЬ: я должен установить массив или что-то? Я не уверен, как он узнает, какое изображение будет следующим или предыдущим при переходе по ссылкам

1 Ответ

2 голосов
/ 20 июня 2011

В вашем .image обработчике кликов вы делаете это: 

$('#slides img').attr('src', rel);

Это установит атрибут src для all для изображений равным rel. Так что ничего не застревает, это выглядит так, потому что все изображения в галерее будут одинаковыми после того, как вы нажмете одну из миниатюр.

Вместо этого вам нужно использовать атрибут rel, чтобы найти правильное изображение в галерее, а затем вызывать rightImage или leftImage достаточное количество раз, чтобы отобразить его. Или вы можете добавить третью функцию, которая выполняет те же действия, что и множественные вызовы rightImage или leftImage без промежуточных шагов.

Вот несколько советов.

  1. Избавьтесь от $('.thumbnail-photos').mouseover вещей, которые просто заканчивают тем, что связывают новый набор обработчиков щелчков каждый раз, когда мышь перемещается над миниатюрой. Перед тем как удалить его, переместите привязку обработчика кликов изнутри наружу.

  2. Добавить id атрибуты слайдов <li> элементов, чтобы их было легче найти.

  3. Заменить атрибуты rel атрибутами data-slide, значения должны соответствовать id атрибутам выше. Это облегчает привязку миниатюр непосредственно к их слайдам.

  4. Теперь обработчик щелчков на миниатюрах может получить слайд с помощью var $li = $('#' + $(this).data('slide')) (или var $li = $('#' + $(this).attr('data-slide')) в более старых версиях jQuery).

  5. Теперь, когда у вас есть право $li, вы сможете определить, в каком направлении и на каком расстоянии вам нужно анимировать значение left $('#slides ul').

...