-1

我有一个无序列表：

<ul>
    <li><a id="fancy_popup" href="popup.html" class="fancybox">
        Popup HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
</ul>

我有一个 jQuery 脚本：

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true
    });
});
</script>

这个 jQuery Fancy Box 脚本可以在其他地方使用div，id="fancy_popup"所以我想为什么不在这种情况下直接将它添加到锚点......我试图弄清楚如何应用 Fancy Box 以便当有人点击弹出 HTML 时上面的链接，根据脚本会弹出一个 Fancy Box 窗口。

我尝试了将, 放在 上id并为这些选择器操作脚本的变体，但无济于事。任何帮助表示赞赏。liul

4

3 回答 3

1

将fancybox绑定到锚点<a>是使用它的正常（和最佳）方式，所以这个

<a id="fancy_popup" href="popup.html" class="fancybox">Popup HTML Link</a>

……完全没问题。

现在，由于您正在打开一个外部页面 ( popup.html)，您可能需要将内容类型设置为iframe... 并最终分配一些维度，因此请尝试

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true,
        type            : "iframe",
        width           : 640, // or whatever
        height          : 320
    });
});
</script>

另一方面，考虑到您可能也想在fancybox中打开其他html文件，然后使用类而不是ID并将相同的类添加到所有锚点，所以

<li><a class="fancy_popup" href="popup.html">Popup HTML Link</a></li>
<li><a class="fancy_popup" href="other.html">Other HTML Link</a></li>
<li><a class="fancy_popup" href="other.html">Other HTML Link</a></li>

并更改您的 jQuery 代码中的选择器，例如

$(".fancy_popup").fancybox( ..... )

因此您可以对多个元素使用相同的脚本。

于 2012-10-04T03:34:49.550 回答
1

代码

<ul>
    <li><a id="fancy_popup" href="popup.html" class="fancybox">Popup HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
</ul>

查询代码

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").click(function(){
    $(this).fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true
        });
    });
});
</script>
于 2012-10-04T11:00:39.043 回答
0

首先，让我感谢上面的答案，因为他们真的帮助我更好地理解了这个该死的 FancyBox 是如何工作的。我知道它必须以某种方式起作用，所以我在这种情况下所做的就是回到基础并使用简单的画廊方法。

我还在这里阅读了其他帖子，即：

无法显示 fancybox 助手按钮

和

fancybox - d.onCleanup 不是一个函数

并意识到我没有在正确的位置包含 CSS 文件。愚蠢的错误，实际上。在这种情况下，我创建了几个不同的文件，并且我将 CSS 包含在文件链中的错误文件中，我的大脑告诉我它已被处理，但事实并非如此。

再次感谢！

于 2012-10-04T19:06:00.597 回答