Question

我的网站上安装了一个lightbox poptrox图库。但是，每个缩略图都会打开该缩略图的完整图像，当您单击下一个/上一个缩略图时，它会移动到下一个缩略图的图片。

是否可以使每个缩略图包含它自己的图库，当您点击它时，全屏图像是图库的一部分。这样，当您在下一个/上一个时钟时，它会滚动浏览其独特的图像集合。

我用它来设置它https://github.com/n33/jquery.poptrox。

任何帮助都会很棒！

Answer 1

根据您设置图库的网站

<div id="gallery">
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a>
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a>
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a>
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a>
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a>
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a>
</div>

你有一个像

这样的jQuery调用

var foo = $('#gallery');
foo.poptrox();

因此您只需添加其他图库，例如

<div id="gallery1">
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a>
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a>
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a>
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a>
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a>
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a>
</div>

<div id="gallery2">
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a>
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a>
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a>
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a>
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a>
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a>
</div>

并添加另一个jQuery

var foo = $('#gallery1');
foo1.poptrox();
var foo2 = $('#gallery2');
foo1.poptrox();

我希望这会有所帮助，如果你发帖，你也试过，我可以看看如何更好地帮助

如何在poptrox灯箱库中添加多个画廊？

1 个答案: