使JQuery LightBox插件与多个图库协同工作
我正在尝试让这个jquery插件=> http://leandrovieira.com/projects/jquery/lightbox/可以在同一页上使用多个图库。
问题是，每次我点击某个图库中的图片时，我都会看到同一页面上所有图库中的所有图片。假设我有两个图库，每个图库有6张照片。如果我点击图库1中的图片，我也会看到图库2中的图片。
我试过这样的方法，但没有成功：
<script type="text/javascript">
$(function(){
$('div.gallery-6').each(function() {
$(this).find('a.lightbox').lightBox();
});
});
</script>不幸的是，它不能工作！
解决这个问题的办法是什么？
再一次，我试图实现的是能够在适当的图库中查看图片。我不希望所有的照片都被视为一个画廊。
回答 9
Stack Overflow用户
发布于 2010-01-13 04:04:34
只需很少的改动，我就可以在一个页面上使用多个图库。
The JQuery
$(function() {
$('#gallery1 a').lightBox();
$('#gallery2 a').lightBox();
...
$('#galleryN a').lightBox();
});HTML
<div class="gallery" id="gallery1">
<div class="gallery" id="gallery2">
...
<div class="gallery" id="galleryN">我把样式从id改成了class。
Stack Overflow用户
发布于 2010-05-11 11:58:20
这是Ben回答的一个补丁，对于那些想要使用多个图库，或者只是将lightbox效果添加到图像中的人来说，可以在<head>...</head>标记中使用它
下面是代码(注意:我为jQuery修改了变量$，它更适合我)：
<script type="text/javascript">
jQuery(function() {
var boxen = [];
//find all links w/ rel="lightbox[gallery_name]" or just rel="lightbox" it works both ways
jQuery('a[rel*=lightbox]').each(function() {
//push only unique lightbox[gallery_name] into boxen array
if (jQuery.inArray(jQuery(this).attr('rel'),boxen)) boxen.push(jQuery(this).attr('rel'));
});
//for each unique lightbox group, apply the lightBox
jQuery(boxen).each(function(i,val) { jQuery('a[rel='+val+']').lightBox(); });
});
</script>这是一个混合了所有可能用途的示例，它们都可以在同一个html中工作，这里我们有两个图库和第三个没有名称的图库，只有"lightbox“引用：
<a href="images/image1.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image1_thumbnail.jpg" width="50" />
<a href="images/image2.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image2_thumbnail.jpg" width="50" />
<a href="images/image3.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image3_thumbnail.jpg" width="50" />
<a href="images/image4.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image4_thumbnail.jpg" width="50" />
<a href="images/image5.jpg" rel="lightbox"><img border="0" height="50" src="images/image5_thumbnail.jpg" width="50" />我希望这能帮到你!
Stack Overflow用户
发布于 2010-02-04 12:58:15
我这样做：
<script type="text/javascript">
$(function(){
$('.lightboxGallery').each(function(){
$('.lightbox', this).lightBox();
});
});
</script>这样，你所要做的就是将每个图库放在某种容器中，你将为每个容器获得一个图像集，例如，下面将创建两个图像集：
<div id="gallery1" class="lightboxGallery">
<a href="image1.jpg" class="lightbox">Image 1</a><br />
<a href="image2.jpg" class="lightbox">Image 2</a><br />
<a href="image3.jpg" class="lightbox">Image 3</a><br />
</div>
<div id="gallery2" class="lightboxGallery">
<a href="image4.jpg" class="lightbox">Image 4</a><br />
<a href="image5.jpg" class="lightbox">Image 5</a><br />
<a href="image6.jpg" class="lightbox">Image 6</a><br />
</div>你可以使用'a‘选择器，但我发现使用'.lightbox’提供了更多的灵活性。
https://stackoverflow.com/questions/2051294
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号