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

Question

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

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

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

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

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

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

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

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

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

Answer 1

От Blueimp Gallery Documentation - jQuery plugin setup:

blueimp Галерея JQuery плагин регистрирует глобальный обработчик щелчка, чтобы открыть ссылки с атрибутом данных галереи в галерее осветителя.

Я побежал быстрый тест и добавил этот код в стороне верхней части в месте ..

<div class="container"> 

    <div class="row"> 

     <div class="col-lg-12"> 

      <a href="img/Orange.JPG" title="Orange" data-gallery> 
       <img class="img-responsive" src="img/Orange.JPG" alt="Orange"> 
      </a> 

     </div> 
    </div> 
</div> 

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

<div class="container"> 

    <div class="row"> 

     <div class="col-lg-12"> 

      <a href="img/Cucumber.JPG" title="Cucumber" data-gallery> 
       <img class="img-responsive" src="img/Cucumber.JPG" alt="Cucumber"> 
      </a> 

     </div> 
    </div> 
</div> 

..и он работает, совершенно не имея, чтобы обернуть его внутри DIV с идентификатором links.

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

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

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

Ссылка: Blueimp Gallery Documentation jQuery Plugin - Container ids and link grouping

<!-- 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"> 
     <img src="images/thumbnails/banana.jpg" alt="Banana"> 
    </a> 
    <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits"> 
     <img src="images/thumbnails/apple.jpg" alt="Apple"> 
    </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"> 
     <img src="images/thumbnails/tomato.jpg" alt="Tomato"> 
    </a> 
    <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables"> 
     <img src="images/thumbnails/onion.jpg" alt="Onion"> 
    </a> 
</div> 

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