如何在同一页面上创建单独的Fancybox库？
如何在同一页面上创建单独的Fancybox库？
提问于 2012-02-28 16:43:39
我们使用的是jQuery 1.7.1和Fancybox 1.3.4。我是Fancybox的新手。我以前从来没有使用过它，但它被广泛使用在一个网站上，我正在工作。建立Fancybox的人被解雇了因为他..。不相干。:)
我正在创建一个产品比较页面。多达四个产品将显示在一个页面上。每个产品可能有多达五个特定于该产品的图像。
当前，当我单击任何图像时，Fancybox会弹出并创建页面上所有图像的库。所以，如果我有一个有五个图像的产品，就有一个五个图片库。如果我有四个有五个图像的产品，就有一个有二十幅图像的画廊。这对我来说不太好。
我想要的是每个产品都有自己的画廊。如果他们点击产品A，他们只会看到与产品A相关的图片，如果他们点击产品B.你明白了。
如何使Fancybox在单个页面上创建单独的图库？
编辑
目前，我的rel属性被设置为‘auto人字库’。下面的答案之一建议我将其改为类似的东西，这将产生我正在寻找的东西：
<img rel='Gallery1'>
<img rel='Gallery1'>
<img rel='Gallery2'>
<img rel='Gallery2'>
<img rel='Gallery3'>
<img rel='Gallery3'>如果我将rel属性更改为除“自动库”之外的任何内容，单击图像只会将图像打开到一个新窗口中。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-02-28 17:56:13
只需为每个图库分配一个不同的rel属性
<a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a>
<a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a>
<a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a>..。它们都可以使用相同的脚本：
$(".fancybox").fancybox();Stack Overflow用户
发布于 2018-10-16 06:29:37
这里还有一个例子(基于)。为data-fancybox属性添加相同的值。(例如，data-fancybox="group")
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
body {
margin: 0;
padding: 10vh 10vw;
color: #444;
}
h1 {
font-weight: 700px;
}
h2 {
font-weight: 600;
}
a,
a:hover {
color: #ff5268;
}
.imglist {
font-size: 0;
}
.imglist a {
display: inline-block;
margin: 10px 10px 0 0;
}
.imglist a:last-of-type {
margin-right: 0;
}
.imglist a img {
vertical-align: top;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>
<h2>fancybox v3.5.2 - Grouping galleries</h2>
<p>
Groups are created by adding the same <code>data-fancybox</code> attribute value
</p>
<hr class="my-5" />
<h4>Group 1 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="group1" data-caption="Backpackers following a dirt trail">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
<a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="group1" data-caption="Mallorca, Llubí, Spain">
<img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
</a>
<a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="group1" data-caption="Danish summer">
<img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
</a>
<a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="group1" data-caption="Sunrise above a sandy beach">
<img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" />
</a>
</p>
<h4>Group 2 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="group2" data-caption="Woman on a slope by the shore">
<img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
</a>
<a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="group2" data-caption="Mountain hiking sunset">
<img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
</a>
<a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="group2" data-caption="Sunset Picnic">
<img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
</a>
<a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="group2" data-caption="On them Indiana Nights">
<img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
</a>
</p>
Stack Overflow用户
发布于 2018-01-30 10:04:52
我在Fancybox 3上也遇到了同样的问题--使用rel="gallery"和data-fancybox-group="gallery"都没用。
通过添加.attr('data-fancybox', 'gallery');找到使其工作的代码依赖/小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9486034
复制相关文章
相似问题
腾讯云开发者
