Question

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

我想念一些东西，但我看不出来：

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') });
        });
    });

});

我在萤火虫中没有任何错误。

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

Answer 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/ 如果你想打开一个网址，你需要指定fancybox类型 IFRAME ...

            $(document).ready(function () {

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

                btn=$(this);

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


            });
        });

Answer 2

  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 。

Answer 3

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

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

最后，您的网址必须是图片：

就像那样：

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

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

基本的Fancybox代码没有任何效果

3 个答案: