Bootstrap Image Gallery：鏈接到圖像文件的鏈接列表之間的html？

Question

看看這裏的演示Bootstrap Image Gallery Demo和這裏的文檔Bootstrap Image Gallery on GitHub 我想知道我是否可以在圖像文件的鏈接列表之間添加html。

對於一個項目，我的圖像散佈在整個網站上，圖像之間有文字。

我希望能夠點擊任何圖像，並有模式/畫廊出現以及然後能夠瀏覽我網站上的所有圖像。

作爲一個例子，我正在採取一個基本的結構，可以在這裏看到Start Bootstrap 1 Col Portfolio。看看這個結構，我希望能夠點擊任何700×300圖像佔位符，並每次觸發模式/圖庫。

一旦莫代爾/畫廊展覽，我會然後鏈接到能夠通過，可以在現場或者說我決定已包含在相冊中看到所有圖片瀏覽。

請問這是不可能僅僅通過具有多個列表的鏈接每次加的數據畫廊屬性的HTML結構的其餘部分之間的網站上？

在我開始使用Bootstrap Image Gallery之前，知道這個功能是否可能實現將是一件非常好的事情。

我擔心這是不可能的，因爲圖像列表被包裹在一個帶有ID的div中，ID爲鏈接並且具有相同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> 

之間..和它的工作原理，完全不必用ID links把它包一個div裏面的內容。

因此，這意味着一個簡單的有屬性數據畫廊添加到任何圖像鏈接的網站，它會在模/畫廊打開以及顯示出與在此屬性中的所有圖片無論它們在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> 

希望所有這些信息是有人在那裏試圖可能實現網站的類似行爲非常有用。