Question

我通常是jQuery和javascript的新手，所以我需要一些帮助，所以如果有一个简单的解决方案，我会提前道歉。

我希望在页面上有多个图像，当你点击它们时，它们每个都打开一个带有附加图像，文本和链接的html fancybox，根据代码需要用iframe来完成。

这是我想要做的一个示例（我使用了fancybox 2代码并将其分解以实现我想要的效果）。

    $(document).ready(function() {
      $(".fancybox-flyout").click(function() {
       $.fancybox.open({
        padding : 5,
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 150,
        closeClick : true,
        helpers : {
            overlay : true
            }
        });

我希望这个脚本能够在这些对象上运行：

    <a class="fancybox-flyout" href="/iframe_1.html"><img src="image_1.jpg" alt="" /></a>
    <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_2.jpg" alt="" /></a>
    <a class="fancybox-flyout" href="/iframe_2.html"><img src="image_3.jpg" alt="" /></a>

所有这一切确实打开了没有效果的链接，所以也许我把它蚕食了太多，但基本上我想从源代码中获得“fancy-box-effects-c”的效果并将其应用于打开html内容而不是另一张照片。

谢谢！

Answer 1

如果以iframe打开html页面，请尝试以下代码：

$(document).ready(function () {
    $(".fancybox-flyout").fancybox({
        padding: 5,
        openEffect: 'elastic',
        openSpeed: 150,
        closeEffect: 'elastic',
        closeSpeed: 150,
        closeClick: false, // <--use false if you want interaction inside your iframe
        helpers: {
            overlay: true
        },
        type: "iframe" // <-- you may need this too ;)
    });
});

参见 JSFIDDLE

一个页面上的多个图像各自打开唯一的HTML内容

1 个答案: