Галерея изображений Bootstrap: html между списком ссылок на файлы изображений?

Глядя на демо здесь Демо-версия Bootstrap Gallery и документация здесь Галерея загрузки Bootstrap на GitHub Я хотел бы знать, могу ли я добавить html между списком ссылок на файлы изображений.

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

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

В качестве примера я беру базовую структуру, которую можно увидеть здесь Начать Bootstrap 1 Col Portfolio. Глядя на эту структуру, я хотел бы иметь возможность щелкнуть любой из 700 x 300 замеров изображений и каждый раз запускать модальную/галерею.

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

Возможно ли это, просто имея несколько списков ссылок на сайте между остальной структурой html и каждый раз добавляя атрибут data-gallery? p >

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

Я боюсь, что это невозможно, поскольку список изображений завернут в div с id, id ссылки и наличие нескольких div с одним и тем же идентификатором в html невозможно.

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

1 ответ

Из Документация по галерее Blueimp - настройка плагина jQuery:

Плагин jQuery Gallery blueimp регистрирует глобальный обработчик кликов для открытия ссылок с атрибутом галереи данных в лайтбокс галереи.

Я выполнил быстрый тест и добавил этот код к вершине на сайте.

<div>
 <div>
 <div>
 <a href="img/Orange.JPG" title="Orange" data-gallery="">
 
 </a>
 </div>
 </div>
</div>

.. и это немного дальше вниз с большим количеством строк и столбцов другого другого содержимого html между ними.

<div>
 <div>
 <div>
 <a href="img/Cucumber.JPG" title="Cucumber" data-gallery="">
 
 </a>
 </div>
 </div>
</div>

.. и он работает, полностью без необходимости обертывать его внутри div с id links.

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

Связанный: То, что я нахожу супер полезным, состоит в том, что можно группировать изображения с помощью атрибута data-gallery, называя атрибут любым, что угодно.

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

Ссылка: Документация по галерее Blueimp Плагин jQuery - идентификаторы контейнеров и группировка ссылок

<!-- As mentioned beforehand, the wrapping div with and an id
for the list of image links does not have to be present for
the modal/gallery to show the correct image -->
<div id="fruits">
<!-- What is important, is to have the data-gallery attribute
and giving thi attribute to all the images one wants in one 
set of images to be displayed in the modal/gallery -->
 <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>
<!-- Not really necessary if one has images spread all over
the html document but still likes to display them in the gallery --> 
<div id="vegetables">
<!-- Here a different data-gallery attribute is being given
to different images, meaning they will not show in the same
group as the images with the #blueimp-gallery-fruits attribute -->
 <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>

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

licensed under cc by-sa 3.0 with attribution.