Question

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

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

我希望能够点击任何图像并让模态/图库出现，然后能够浏览我在网站上的所有图像。

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

一旦模态/图库显示，我就会链接到能够浏览网站上可以看到的所有图像，或者我决定将其包含在图库中。

只需在html结构的其余部分之间的网站上添加多个列表链接，并且每次添加数据库属性，这是否可行？

在开始使用Bootstrap Image Gallery之前，知道是否可以实现此功能会很棒。

我担心这是不可能的，因为图片列表包含在带有id的div中，id为链接，并且在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中。

因此，这意味着只需将数据库属性添加到网站中的任何图片链接，它就会在模态/图库以及中打开在模式/库中显示具有此属性的所有图像，无论它们在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>

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

Bootstrap图库：图像文件链接列表之间的HTML？

1 个答案: