Галерея BlueImp - Разная галерея для разных изображений

Я использую Галерея BlueImp.

Как говорится в заголовке, представьте себе сообщение facebook image, когда пользователь нажимает на сообщение, я хочу показать, что все изображения принадлежат этому сообщению. Я не знаю, как это реализовать.

Прежде всего

Я имею в виду doc, есть чистый js script как этот

document.getElementById('links').onclick = function (event) {
 event = event || window.event;
 var target = event.target || event.srcElement,
 link = target.src ? target.parentNode : target,
 options = {index: link, event: event},
 links = this.getElementsByTagName('a');
 blueimp.Gallery(links, options);
};

script работает, когда у нас есть html, как этот

<div id="links">
 <a href="images/banana.jpg" title="Banana">
 
 </a>
 <a href="images/apple.jpg" title="Apple">
 
 </a>
 <a href="images/orange.jpg" title="Orange">
 
 </a>
</div>

из-за getElementById ('links'), который обертывает тег привязки

Моя проблема

У меня есть html, как это (на самом деле это миниатюра для кириллицы twitter)

<div id="post1">
<div>
 <div>
 <a href="/test1.jpg" target="_blank">
 
 </a>
 </div>
 <div>
 <a href="/test2.jpg" target="_blank">
 
 </a>
 </div>
</div>
</div>

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

В настоящее время

$(document).on('click', 'a.thumbnail', function () {
 var link = $(this);
 blueimp.Gallery(link);
});

Скажем, пользователь нажимает . Эта функция отображает только test.jpg. Я хочу показать test2.jpg и умею скользить влево на test1.jpg

любая идея, как добиться этого? Я царапаю голову T_T

2 ответа

Идентификаторы контейнеров и группировка ссылок

Если значение атрибута галерея данных является допустимой строкой id (например, "# blueimp-gallery" ), оно используется как опция контейнера. Установка галереи данных в непустую строку также позволяет группировать ссылки на разные наборы изображений галереи:

<div id="fruits">
 <a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits">
 
 </a>
 <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits">
 
 </a>
</div>
<div id="vegetables">
 <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
 
 </a>
 <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables">
 
 </a>
</div>

Это откроет ссылки с атрибутом data-gallery # blueimp-gallery-fruits в виджетах галереи с id blueimp-gallery-fruits и ссылки с атрибутом галерея данных # blueimp-gallery-vegetables в виджете Gallery с id blueimp-gallery-vegetables strong > .


Я нашел решения

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

посмотрите ссылку

https://github.com/blueimp/Gallery#container-ids-and-link-grouping

licensed under cc by-sa 3.0 with attribution.