fancybox，使用不是图库的图像和div进行幻灯片放映

Question

我正在使用jQuery fancybox插件来创建图库。用户点击图像，然后显示模态以浏览所有图像。到目前为止，所有操作都使用以下代码完成。

但我想要做的改变是在模态幻灯片放映中。幻灯片显示需要显示点击的特定图像以及不在图库中的其他图像以及额外的divs。那些额外的图像和divs可能会留在代码中的任何位置。

HTML：

<a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/a_big.jpg"    alt="image project"/>
</a>

<a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/b_big.jpg"    alt="image project"/>
</a>

<a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/c_big.jpg"    alt="image project"/>
</a>

JS：

$('.fancybox').fancybox({
    padding: 0,
    openEffect : 'elastic',
    openSpeed  : 150, 
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    'autoSize': false,
    'autoWidth'    : 600,
    'autoScale'     : false,
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'type'          : 'swf',
    'autoCenter ' :true,
    'aspectRatio':true
});

1）如何实现？

2）如果fancybox不合适，是否有任何其他脚本有助于以响应式设计方式实现目的？

编辑：在线演示是here。

Answer 1

我正在寻找，我看到如果你将data-fancybox-group添加到你想要添加到库中的其他元素，fancybox会获得它们并按预期工作。

检查this jsFiddle作为示例（图像不在jsFiddle中加载，但如果您将代码复制到文件，您可以查看它是如何工作的）。

PS。您的图像中有一些不正确的属性。寻找width11=""和height11=""。

Answer 2

把它放在锚标签中

    rel="group1"
    rel="group1"
    rel="group2"
    rel="group2"

要么

     data-fancybox="group_1"
    data-fancybox="group_1"
    data-fancybox="group_2"
    data-fancybox="group_2"

<a data-fancybox="group_<?= $counter ?>" class="fancybox" href="image_path"></a>