jQuery fancybox 多张专辑

Question

我正在尝试使用 FancyBox 来创建一个单击的相册，即打开我 "N" 的图像每个你看到我点击每个图片，不知道如何如果通过 JS、互联网搜索和许多选项但尚未取得任何成就，请执行此操作...

我不想单击打开一个图像，而是打开多个图像查看相册

这是我的代码：

<aside class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <article class="album">
        <h3>Galería</h3>
        <a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg">
            <figure>
                <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" />
            </figure>
        </a>
    </article>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <article class="album">
        <h3>Galería</h3>
        <a class="fancybox" rel="gallery2" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg">
            <figure>
                <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" />
            </figure>
        </a>
    </article>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <article class="album">
        <h3>Galería</h3>
        <a class="fancybox" rel="gallery3" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg">
            <figure>
                <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" />
            </figure>
        </a>
    </article>
</div>

Answer 1

如果您使用 red 属性对图像进行分组，您将可以打开一张图像并滚动浏览图库图像。目前您有 rel="gallery1"、rel="gallery2" 等。将其更改为：每个图像的 rel="gallery1"。

Answer 2

很抱歉我一直在回答而不是评论（没有足够的街头信誉）。有示例代码吗？

像这样：

$(".fancybox").fancybox({ //stuff here... });

Answer 3

好吧，我找到了一个我不知道最好的解决方案，但正在努力将隐藏在 link class="fancybox hidden" 的 class 添加到其他元素但同一张专辑

<a class="fancybox" rel="gallery1" href="assets/own/images/1.jpg" title="album 1/1">
    <figure>
        <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" />
    </figure>
</a>
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/2.jpg" title="album 1/2"></a>
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/3.jpg" title="album 1/3"></a>
<a class="fancybox hidden" rel="gallery1" href="assets/own/images/4.jpg" title="album 1/4"></a>

这也适用于其他专辑...

<a class="fancybox" rel="gallery2" href="assets/own/images/6.jpg" title="album 2/1">
    <figure>
        <img src="assets/own/images/galeria/test_pic_gallery.png" alt="" />
    </figure>
</a>
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/5.jpg" title="album 2/2"></a>
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/4.jpg" title="album 2/3"></a>
<a class="fancybox hidden" rel="gallery2" href="assets/own/images/3.jpg" title="album 2/4"></a>

这里是在线示例：Galleria working

正在将底部的标题添加到图片中...

这是 Fancybox 的另一个解决方案

http://jsfiddle.net/2k8EP/

jQuery fancybox 多张专辑

jQuery fancybox multiple album

javascript

jquery

fancybox