Bootstrap Image Gallery：图像文件链接列表之间的html？

Question

查看这里的演示 Bootstrap Image Gallery Demo 和这里的文档 Bootstrap Image Gallery on GitHub 我想知道是否可以在图像文件的链接列表之间添加 html。

对于一个项目，我的图片散布在整个网站上，这些图片之间有文字。

我希望能够单击任何图像并显示模式/图库，然后能够浏览我在网站上拥有的所有图像。

作为一个例子，我采用了一个基本结构，可以在这里看到Start Bootstrap 1 Col Portfolio。看着这个结构，我希望能够单击任何 700 x 300 图像占位符并每次触发模态/图库。

模式/图库显示后，我将链接以浏览网站上可以看到的或我决定包含在图库中的所有图像。

这是否可以通过简单地在网站上的 多个列表 链接在 html 结构的其余部分之间实现，并且每次添加 data-gallery 属性？ p>

在我开始使用 Bootstrap Image Gallery 之前，很高兴知道这个功能是否可以实现。

我担心这是不可能的，因为图像列表被包装在一个带有 id 的 div 中，id 是 links 并且在 html 中不可能有多个具有相同 id 的 div。

我怎样才能触发模态/画廊，同时仍然在网站的不同位置而不是缩略图画廊类型排列中保留图像？

Answer 1

来自Blueimp Gallery Documentation - jQuery plugin setup：

blueimp Gallery jQuery 插件注册了一个全局点击处理程序，以在 Gallery 灯箱中打开具有 data-gallery 属性的链接。

我确实运行了一个快速测试并将此代码添加到站点的顶部..

<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 中。

因此，这意味着只需将属性 data-gallery 添加到站点中的任何图像链接，它就会在模态/图库中打开 以及在 modal/gallery 中显示所有具有此属性的图像，无论它们在 html 文档中的位置如何。

相关： 我发现超级有用的是，可以使用 data-gallery 属性对图像进行分组，随意命名属性。

这样的图像集可以显示在一个组中，而其他图像集则显示在另一组中，也完全不管它们在 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>

希望所有这些信息对那些试图为网站实现类似行为的人有用。