- 首页
- 前端开发
- Bootstrap Image Gallery:图像文件链接列表之间的html?
Bootstrap Image Gallery:图像文件链接列表之间的html?
[英] Bootstrap Image Gallery: html between list of links to image files?
本文介绍了Bootstrap Image Gallery:图像文件链接列表之间的html?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
查看此处的演示 Bootstrap Image Gallery 演示 和此处的文档 GitHub 上的 Bootstrap 图片库 我想知道是否可以在图像文件的链接列表之间添加 html.
对于一个项目，我将图像散布在整个网站上，这些图像之间有文字.
我希望能够点击任何图像并显示模态/图库，然后能够浏览我在网站上拥有的所有图像.
作为一个例子，我采用了一个基本结构，可以在这里看到 Start Bootstrap 1上校作品集.看看这个结构，我希望能够点击任何 700 x 300 图像占位符并每次触发模态/画廊.
模式/图库显示后，我将链接以便能够浏览所有可以在网站上看到的或我决定包含在图库中的图像.
这是否可以通过在网站上的其余 html 结构和每次添加 data-gallery 属性之间简单地多个列表链接来实现?>
在我开始使用 Bootstrap Image Gallery 之前，如果能知道此功能是否可以实现，那就太好了.
我担心这是不可能的，因为图像列表包含在带有 id 的 div 中，id 是 links 并且在 html 中不可能有多个具有相同 id 的 div.
我还能如何触发模式/图库，同时仍然在网站上的各个位置而不是缩略图库类型排列中放置图像?
解决方案
来自 Blueimp Gallery 文档 - jQuery 插件设置:
<块引用>
blueimp Gallery jQuery 插件注册一个全局点击处理程序，以在 Gallery 灯箱中打开带有 data-gallery 属性的链接.
我确实运行了一个快速测试并将此代码添加到站点的顶部..
<div class="row"><div class="col-lg-12"><a href="img/Orange.JPG" title="Orange" 资料库><img class="img-responsive" src="img/Orange.JPG" alt="Orange"></a>
..而这个稍微向下一点，中间有大量其他各种 html 内容的行和列..
<div class="row"><div class="col-lg-12"><a href="img/Cucumber.JPG" title="Cucumber" 资料库><img class="img-responsive" src="img/Cucumber.JPG" alt="Cucumber"></a>
..它可以工作，完全无需将其包装在 id 为 links 的 div 中.
因此，这意味着您只需将 data-gallery 属性添加到站点中的任何图像链接，它就会在模态/画廊以及中打开在模态/图库中显示具有此属性的所有图像，而不管它们在 html 文档中的位置.
相关:我觉得非常有用的是，可以使用 data-gallery 属性对图像进行分组，随意命名该属性.
像这样一组图像可以显示在一组中，而其他图像组可以显示在另一组中，也完全不管它们在 html 文档中的位置.
参考:Blueimp Gallery 文档jQuery插件 - 容器 ID 和链接分组
<!-- 如前所述，包装 div 和一个 id对于图像链接列表不必存在模式/画廊以显示正确的图像 --><div id="水果"><!-- 重要的是要有data-gallery属性并将此属性赋予您想要的所有图像要在模态/画廊中显示的一组图像 --><a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits"><img src="images/thumbnails/banana.jpg" alt="香蕉"></a><a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits"><img src="images/thumbnails/apple.jpg" alt="苹果"></a>
<!-- 如果图像遍布各处，则没有必要html 文档，但仍然喜欢在图库中显示它们 --><div id="蔬菜"><!-- 这里给出了一个不同的数据画廊属性不同的图像，这意味着它们不会以相同的方式显示分组为具有#blueimp-gallery-fruits 属性的图像 --><a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables"><img src="images/thumbnails/tomato.jpg" alt="番茄"></a><a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables"><img src="images/thumbnails/onion.jpg" alt="洋葱"></a>
希望所有这些信息对那些试图为网站实现类似行为的人有用.
Looking at the demo here Bootstrap Image Gallery Demo and the documentation here Bootstrap Image Gallery on GitHub
I would like to know if I can add html between the list of links to image files.
For a project I have images scattered all over the site with text in between those images.
I would like to be able to click on any of the images and have the modal/gallery come up as well as then being able to browse through all images that I have on the site.
As an example I am taking a basic structure that can be seen here Start Bootstrap 1 Col Portfolio. Looking at this structure I would like to be able to click on any of the 700 x 300 image placeholders and trigger the modal/gallery each time.
Once the modal/gallery shows, I would then link to be able to browse through all images that can be seen on the site or that I decide to have included in the gallery.
Would this be possible by simply having multiple lists of links on the site between the rest of the html structure and each time adding the data-gallery attribute?
It would be great to know if this functionality is possible to achieve before I start working with the Bootstrap Image Gallery.
I fear that this is not possible since the list of images is wrapped in a div with id, the id being links and having multiple divs with the same id is not possible in html.
How else can I trigger the modal/gallery while still having the images in various places on the site instead of in a thumbnail gallery type arrangement?
解决方案
From Blueimp Gallery Documentation - jQuery plugin setup:
The blueimp Gallery jQuery plugin registers a global click handler to open links with data-gallery attribute in the Gallery lightbox.
I did run a quick test and added this code towards the top in the site..
<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>
..and this one a bit further down with plenty of rows and columns of various other html content in between..
<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>
..and it works, completely without having to wrap it inside a div with id links.
So this means that one simply has to add the attribute data-gallery to any image link in the site and it will open in the modal/gallery as well as show all the images with this attribute in the modal/gallery regardless of their position in the html document.
Related :
What I find super useful is that one can group images with the data-gallery attribute, naming the attribute whatever one pleases.
Like this sets of images can be displayed in one group and sets of other images are displayed in another group, also completely regardless of their position in the html document.
Reference : 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>
Hope all this information is useful to someone out there trying to possibly achieve a similar behaviour for a site.
这篇关于Bootstrap Image Gallery:图像文件链接列表之间的html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
