jQuery lightBox плагин для галереи с миниатюрами и основным изображением

Question

В основном у меня есть галерея изображений с миниатюрами и «основным» изображением, поэтому нажатие на миниатюру изображения обновляет основное изображение с соответствующим полноразмерным изображением.

Миниатюра изображения:

<a href="/images/<?php echo $product->image; ?>" onclick="$('#main-image').attr('src', '/images/<?php echo $product->image; ?>'; $('#main-image-link').attr('href', this.href); return false;">
    <img src="/images/<?php echo $product->image; ?>" alt="" />
</a>

Главное изображение:

<a id="main-image-link" href="/images/<?php echo $product->image; ?>" class="lightbox">
    <img src="/images/<?php echo $product->image ?>" alt="" id="main-image" />
</a>

А вот код лайтбокса:

$(function() {
     $('a.lightbox').lightBox(); 
});

http://leandrovieira.com/projects/jquery/lightbox/

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

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

Answer 1

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

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});

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

Answer 2

Плагин LightBox делает это автоматически.

<a class="lightbox" href="image1.jpg"><img src="image1thumb.jpg" /></a>
<a class="lightbox" href="image2.jpg"><img src="image2thumb.jpg" /></a>
<a class="lightbox" href="image3.jpg"><img src="image3thumb.jpg" /></a>

Тогда ...

$('A.lightbox').lightBox();

Если вы не хотите размещать ссылки / изображения на странице, просто используйте CSS display: none.