基本的 Fancybox 代码没有效果答案

【问题标题】：Basic Fancybox code have no effects基本的 Fancybox 代码没有效果
【发布时间】：2013-09-27 09:46:08
【问题描述】：

我不明白为什么这个简单的代码没有运行。

我错过了一些东西，但我没有看到：

HTML：

<span class="test" url="mapage.php">It's a test</span>

Javascript：

 jQuery(function () {
    $(document).ready(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
    });

});

我在 firebug 中没有任何错误。

小提琴：http://jsfiddle.net/6ZZJH/4/

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

首先你有嵌套的文档就绪函数...

试试

$(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
});

或者是上面的简写。

 $(function () {

        $('.test').on('click', function () {
            //alert($(this).attr('url'));
            $.fancybox({ 'href': $(this).attr('url') });
        });
});

更新工作 jsfiddle：http://jsfiddle.net/kasperfish/6ZZJH/9/ 如果你想打开一个 url，你需要指定 fancybox 类型 iframe...

            $(document).ready(function () {

            $('.test').click(function () {

                btn=$(this);

                btn.fancybox({
                    "type": 'iframe',
                    "href": btn.attr('url')
                });


            });
        });

【讨论】：

那是因为，fancybox 不包含在 jquery 中。您必须将其作为脚本标记包含到您的 html 中。如果没有，它不会被加载。看看fancybox的文档

【解决方案2】：

您有几个问题：第一：你应该这样写你的代码：

$(function () {
 //your code here
});

只有当 jQuery 准备好时它才会触发你的代码。

其次，在你的 jsfiddle 中，fancybox lib 没有加载。

你应该补充一下：

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

那么最后，你的url必须是图片：

这样：

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>

这里是 jsfiddle：http://jsfiddle.net/5QYGe/1/

【讨论】：

我已经更改了 jsfiddle 的链接，这是你的...对不起。
没问题，为什么一定是图片？例如，如果我想加载我的页面，我不能？感谢您的帮助
我找到了我的回复：stackoverflow.com/questions/11618221/… 谢谢！
花式框不必在 jsfiddle 中加载...它应该在您自己的 html 中。您的 url 不必是图片......它可以是一个普通的 html 页面......在这种情况下，您需要指定 iframe 的类型。看我的回答。
你是对的，但我不确定；我采取那个方向;）

【解决方案3】：

  jQuery(function () {
 $(document).ready(function () {

    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

});

应该是

$(document).ready(function () {
    $('.test').on('click', function () {
        //alert($(this).attr('url'));
        $.fancybox({ 'href': $(this).attr('url') });
    });
 });

并确保在 html 中包含 jquery.fancybox.version.js 和 jquery.fancybox.version.css。

【讨论】：