Question

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

但我想要做的改变是在模态幻灯片放映中。幻灯片显示需要显示点击的特定图像以及不在图库中的其他图像以及额外的div s。这些额外的图片和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>

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

2 个答案: