fancybox，用不是画廊的图像和 div 制作幻灯片答案

【问题标题】：fancybox, make slideshow with images and divs that are not the galleryfancybox，用不是画廊的图像和 div 制作幻灯片
【发布时间】：2015-05-20 10:36:41
【问题描述】：

我正在使用 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。

【问题讨论】：

我认为您可以使用一些插件事件，例如beforeLoad() 或beforeShow()。这个想法是从那里添加图像或任何你需要的东西。
@kmsdev，如何排除除触发图像之外的所有图像并添加其他图像？文档中的任何线索等？
这只是一个想法，但您可以克隆原始容器，从原始容器中删除项目并添加一些新容器。当modal关闭时，只需替换克隆的修改的原始即可。
@kmsdev, EDIT: added.Firebug 显示 <Object /> 元素在那里。我不知道如何处理它。你能说得更具体些吗？

标签： jquery modal-dialog fancybox slideshow fancybox-2

【解决方案1】：

我一直在寻找，发现如果您将 data-fancybox-group 添加到要添加到图库中的其他元素，fancybox 会获取它们并按预期工作。

以this jsFiddle 为例（图片不会在 jsFiddle 中加载，但如果您将代码复制到文件中，您可以查看其工作方式）。

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

【讨论】：

添加可能包含按钮等的新divs 是什么意思？显然我希望其他图像（不在图库中的图像）和divs 隐藏在页面中
关于不在图库中的图像，您只需将.fancybox 类与data-attribute 一起使用。目前，我不知道它是否适用于div，我会看看。
对不起老兄，正如我所见，它不适用于混合了按相同名称分组的图像的 div。你可以看到我到目前为止所尝试的here。
您是否使用了任何不在图库中但将在幻灯片中显示的图像？我在你的演示中没有找到任何这样的图像。
是的，最后一张图片（代码中的最新图片）在另一个 div 中，但是添加 data-fancybox-group 并将其设置为与图库相同的名称，图片也会显示。

【解决方案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>

【讨论】：

这样您就可以在同一页面上创建多个群组图库。