Как сделать лайкбокс jquery открытым для нескольких изображений по одной ссылке? - PullRequest
Новая
       25

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

10 голосов
/ 15 сентября 2009

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

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

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

Спасибо.

Ответы [ 5 ]

33 голосов
/ 01 октября 2009

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

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 Lightbox автоматически скроет остальные, а затем покажет каждое из них в соответствующее время.

3 голосов
/ 15 сентября 2009

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

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

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

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

1 голос
/ 31 июля 2011 
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

Итак: 

rel="lightbox[renovation]"
0 голосов
/ 01 октября 2009

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

0 голосов
/ 15 сентября 2009

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

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

...