用Bootstrap Photoswipe畫廊

Question

我正在嘗試爲我的網站使用創建一個畫廊。

http://photoswipe.com/

我目前使用的引導

，讓我的網站響應。我想創建一個我可以拍攝12張照片的畫廊。我已經遵循了Photoswipe的示例代碼，但是如果我在每個4張圖像周圍放置行來創建該行，就會破壞圖庫。

http://photoswipe.com/documentation/getting-started.html

我再創建4場獨立的行用相同的畫廊類，但隨後只是創建4個獨立的畫廊。

我試過的第二件事就是創建一個巨大的行，然後在巨大的行內添加我的col-md-3，並希望它們的樣式正確，但是它會像這樣出現。

[] [1

<div class="my-gallery row" itemscope itemtype="http://schema.org/ImageGallery"> 

     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="col-md-3 gallery-img"> 
      <a href="img/gallery/gallery1.jpeg" itemprop="contentUrl" data-size="1024x1024"> 
      <img src="img/gallery/gallery1.jpeg" itemprop="thumbnail" alt="Image description" class="img-responsive"/> 
     </a> 
      <figcaption itemprop="caption description">Image caption 1</figcaption> 
     </figure> 

這裏是我的畫廊HTML。

https://pastebin.com/0e850dZx

有其他人遇到這個問題？

Answer 1

可以使用viewerJS圖像瀏覽器https://fengyuanchen.github.io/viewerjs/

或Blueimp圖庫https://blueimp.github.io/Gallery/

兩種方式僅需要響應小的變化..你不需要擔心列/把圖像和所有。簡單而強大的圖像查看庫