Question

基本上我有一个带有缩略图和“主”图像的图库 - 所以点击缩略图会使用相关的全尺寸图像更新主图像。

缩略图：

<a href="/images/<?php echo $product->image; ?>" onclick="$('#main-image').attr('src', '/images/<?php echo $product->image; ?>'; $('#main-image-link').attr('href', this.href); return false;">
    <img src="/images/<?php echo $product->image; ?>" alt="" />
</a>

主图片：

<a id="main-image-link" href="/images/<?php echo $product->image; ?>" class="lightbox">
    <img src="/images/<?php echo $product->image ?>" alt="" id="main-image" />
</a>

这是灯箱代码：

$(function() {
     $('a.lightbox').lightBox(); 
});

http://leandrovieira.com/projects/jquery/lightbox/

如您所见，点击主图像后激活灯箱。我遇到的问题是点击主图像只会为该图像显示一个灯箱。

我想要的是显示一个显示所有图像的灯箱（当前所选主图像的灯箱作为起点）。

Answer 1

LightBox插件会自动执行此操作。

<a class="lightbox" href="image1.jpg"><img src="image1thumb.jpg" /></a>
<a class="lightbox" href="image2.jpg"><img src="image2thumb.jpg" /></a>
<a class="lightbox" href="image3.jpg"><img src="image3thumb.jpg" /></a>

则...

$('A.lightbox').lightBox();

如果您不想在页面上放置链接/图片，只需使用CSS display: none。

Answer 2

您需要首先让图库工作，就像他们在Example page上一样（创建一个无序列表，这将确保下一个导航正常工作）。

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});

只有这样你才能添加刷新主图像的逻辑，因为这是你在插件的基本功能之上所做的自定义。

带有缩略图和主图像的jQuery lightBox插件

2 个答案: