Question

我有一个无序列表：

<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，以便当有人点击上面的Popup HTML链接时，会根据脚本弹出Fancy Box窗口。

我尝试过将id放在li ul上，{{1}}并操纵这些选择器的脚本无效。任何帮助表示赞赏。

Answer 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( ..... )

所以你可以为多个元素使用相同的脚本。

Answer 2

HTML CODE

<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 CODE

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

Answer 3

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

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

can't get fancybox helper buttons to show

和

fancybox - d.onCleanup is not a function

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

再次感谢！

用于从无序列表中的一个列表项弹出HTML页面的花式框

3 个答案: