Question

我正在尝试将Fancybox2用于一组20张图像，但图像打开时没有任何效果。这是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flickr Feed</title>
    <link href="../_css/site.css" rel="stylesheet">
    <link rel="stylesheet" href="../fancybox2/source/jquery.fancybox.css" type="text/css" media="screen" />

    <style>
        .image {
            float: left;
            padding: 10px;
            border: solid 1px white;
            margin: 0 30px 30px 0;
        }
        .image:hover {
            border-color: red;
            background-color: rgb(204,204,204);
        }


    </style>

    <script src="../_js/jquery-1.7.1.min.js"></script>

    <!-- Add fancyBox -->

    <script type="text/javascript" src="../fancybox2/source/jquery.fancybox.pack.js"></script>

    <script>
        $(document).ready(function() {
            var URL = "http://api.flickr.com/services/feeds/groups_pool.gne";
            var ID = "35034346867@N01";
            var jsonFormat = "&format=json&jsoncallback=?";

            var ajaxURL = URL + "?id=" + ID + jsonFormat;
            $.getJSON(ajaxURL,function(data)
                    {
                        $('h1').text(data.title);
                        $.each(data.items,function(i, photo)

                                {
                                    var photoHTML = '<span class="image">';
                                    photoHTML += '<a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '">';
                                    photoHTML += '<img src="' + photo.media.m.replace('_m', '_s') + '"></a>';


                                    $('#photos').append(photoHTML);

                                }


                        );//end each

                        $('#photos').fancybox(
                                {
                                    openEffect:'none',
                                    closeEffect:'none'
                                }
                        );
                    }

            );//end get JSON


        }); // end ready
    </script>

</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
    </div>
    <div class="content">
        <div class="main">
            <h1>Flickr Images</h1>
        <div id="photos"></div>
        <br class="clearLeft">
        </div>
    </div>
    <div class="footer">
        <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </div>
</div>
</body>
</html>

我收到错误消息'无法加载请求的内容。请稍后再试用FancyBox2脚本。

Answer 1

将fancybox初始化代码移到getJSON方法回调中，因为这是添加所有图像的地方。 fancybox插件的选择器错误我认为它应该是#photos。试试这个。

       $.getJSON(ajaxURL,function(data)
                {
                    $('h1').text(data.title);
                    $.each(data.items,function(i, photo)

                            {
                                var photoHTML = '<span class="image">';
                                photoHTML += '<a class="fancybox" rel="gallery1" href="' + photo.media.m.replace('_m', '_b') + '">';
                                photoHTML += '<img src="' + photo.media.m.replace('_m', '_s') + '"></a>';


                                $('#photos').append(photoHTML);

                            }


                    );//end each
                    $('#photos').fancybox(
                       {
                           openEffect:'none',
                           closeEffect:'none'
                        }
                    );
                }

        );//end get JSON

如何正确地将FancyBox2应用于页面的图像

1 个答案: