单独的缩略图单击上的 Jquery 灯箱图像库答案

【问题标题】：Jquery lightbox image gallery on a seperate thumbnail click单独的缩略图单击上的 Jquery 灯箱图像库
【发布时间】：2013-01-09 08:56:54
【问题描述】：

我正在尝试在单击缩略图时调用 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 文件也包括在内。

是否有任何解决方案可以在单独单击缩略图时调用灯箱库？请帮帮我。

【问题讨论】：

标签： php javascript jquery html typo3

【解决方案1】：

确保您只包含 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() 的 a 标签的 href 属性中的 URL 加载其图像（而不是从链接内的图像标签），您可以删除其中的所有图像标签#gallery a 这将使您免于最初加载一堆巨大的图像。

【讨论】：

这是另一种获取方法- $('.launchlightbox').click(function(e){ e.preventDefault(); $('#counter-1').trigger( '点击'); });
是的，但这要复杂得多，并且调用不需要调用的方法。如果您打算使用 ID，您可以替换我的 $("a.lightboxgallery").first().lightBox();只需使用 $("#counter-1').lightBox(); 绝对没有理由使用 trigger 或 preventDefault。
感谢 Jack 的宝贵反馈。
如果您喜欢反馈，请将我的回复标记为答案 - 这样就表明您的问题已得到解答（同时也表明您接受了问题，以便将来人们有理由回答您的问题！ ) 如果我的回答没有回答您的问题，请进一步澄清，以便我可以修改我的回答以完全解决任何剩余的问题。
可能是它是一个解决方案。但在我的情况下，你的代码对我没有帮助。