Photoswipe 图库 Bootstrap

Question

我正在尝试使用以下方法为我的网站创建图库。

我目前正在使用 Bootstrap 来让我的网站响应。我想创建一个画廊，我可以在其中放置大约 12 张图片。我遵循了 Photoswipe 的示例代码，但如果我在每 4 张图像周围放置行来创建行，它会破坏图库。

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

然后我用相同的画廊创建了 4 个单独的行 class 但它只创建了 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/

两者都是响应式的小改动，只需要..你不需要担心列/放置图像等等。简单而强大的图像查看库

Photoswipe 图库 Bootstrap

Photoswipe gallery with Bootstrap

javascript

css

jquery

twitter-bootstrap

photoswipe