0

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

我想在页面上有多个图像，当您单击它们时，它们每个都会打开一个带有附加图像、文本和链接的 html 花式框，根据他的代码需要使用 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 内容而不是另一个图片。

谢谢！

4

1 回答 1

0

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

$(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

于 2013-07-23T22:46:54.847 回答