我试图在缩略图点击上调用jquery灯箱画廊。但这行不通。
这是html代码-
<a class="launchlightbox" href="#"><img src="image_thumb.jpg" alt="" class="small_image"></a>
<div id="gallery">
<a class="lightboxgallery" href="image1.jpg" id="counter-1"><img src="image1.jpg"></a>
<a class="lightboxgallery" href="image2.jpg" id="counter-2"><img src="image2.jpg"></a>
<a class="lightboxgallery" href="image3.jpg" id="counter-3"><img src="image3.jpg"></a>
</div>
我已经写了一个Jquery代码来调用画廊-
$('.launchlightbox').click(function(e){
e.preventDefault();
$(this).next('.lightboxgallery').lightBox();
});
但这对我没有帮助。Jquery灯箱插件的JS和CSS文件也包括在内。
是否有任何解决方案可以在单独的缩略图单击上调用灯箱库?
确保你只包含jQuery/jQuery Lightbox:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
确保你有CSS(并确保media="screen"在那里):
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
同样，你用来启动灯箱的代码是不需要的——不需要引用你点击的链接来在其他地方启动灯箱。
$('a.launchlightbox').click(function(){
$("a.lightboxgallery").first().lightBox();
return false;
});
此外，由于lightbox从位于lightBox()被调用的a标签的href属性中的URL加载其图像(而不是从链接中的图像标签)，您可以删除#gallery a中的所有图像标签，这将节省您最初加载一堆巨大的图像。