Как сделать ярлык jquery открывать несколько изображений из одной ссылки?

Использование лайтбокса, такого как ColorBox или jQuery Lightbox Plugin как я могу создать единственную ссылку, которая открывает галерею/массив изображений?

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

Мое мышление состояло в том, что я просто делаю это как обычно 1 ссылку на 1 изображение, а затем использовать jquery, чтобы скрыть все, кроме первой ссылки. Должен быть лучший способ?

Спасибо.

Ответы

Ответ 1

Вот правильное (и более эффективное) решение:

HTML:

<div id='gallery'>
    <a href="images/big-image1.jpg">
        <img src="images/thumbnail-image1.jpg"/>
    </a>
    <a href="images/big-image2.jpg" ></a>
    <a href="images/big-image3.jpg" ></a>
    <a href="images/big-image4.jpg" ></a>
</div>

JQuery/JS:

$(document).ready(function() {
    $('#gallery a').lightBox();
});

Примечание.. Как вы можете видеть, просто перечислите ссылки привязки к другим изображениям, которые вы хотите отделить от галереи. Не нужно добавлять изображения в разметку, а затем скрывать их с помощью JS. Единственное изображение, которое вы увидите в приведенном выше примере разметки, - это images/thumbnail-image1.jpg Лайтбокс автоматически скроет остальную часть, а затем отобразит каждый в соответствующее время.

Ответ 2

Используя jQuery Lightbox Plugin, в примере кода говорится следующее:

$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});

Это заставляет все ссылки открывать лайтбокс, и для просмотра галереи можно использовать ссылки Next/Back. Это то, что вы ищете?

(Пример доступен здесь: http://leandrovieira.com/projects/jquery/lightbox/#example)

Ответ 3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

Итак:

rel="lightbox[renovation]"

Ответ 4

Возможно, я ошибаюсь, но у меня создается впечатление, что вы хотите сделать больше, чем галерея стиля "сгруппированная фотография", предлагаемая ColorBox. Я не совсем уверен в следующей/предыдущей функциональности, которую вы описываете, но я думал о том, что я буду писать эту функциональность без ColorBox изначально.

Добавьте свою галерею просмотра в обычный div на странице. Когда вы настроите галерею и ее поведение по своему вкусу, вы можете вызывать ColorBox inline на вашем div (показывая ваш вновь созданный элемент управления во всплывающем окне).

Ответ 5

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