javascript - 花式盒子 - "The requested content cannot be loaded."

Question

我在投资组合中遇到了 Fancybox 的问题。它适用于除一页以外的每一页 - http://pandadol.com/candyshop.html .

图像 7、8、9、11、12、13、23、24、25、27 给我一个“请求的内容无法加载错误”，在新选项卡中打开它们返回“你没有在此服务器上访问/pics/candyshop/7.jpg 的权限。此外，在尝试使用 ErrorDocument 处理请求时遇到 404 Not Found 错误。”

所有图片都在服务器上。这是代码-

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu").click(function(){  // Update class to point at the head of the list
});

}

});

</script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24042513-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
        !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</script>




    <!-- Add jQuery library -->
    <script type="text/javascript" src="../lib/jquery-1.8.0.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.0"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.0" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            /*
             *  Simple image gallery. Uses default settings
             */

            $('.fancybox').fancybox();

            /*
             *  Different effects
             */

            // Change title type, overlay closing speed
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });

            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });

            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'none',

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
            });

            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                closeClick : true,

                helpers : {
                    overlay : null
                }
            });

            /*
             *  Button helper. Disable animations, hide close button, change title type and content
             */

            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */

            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

            /*
             *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */
            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

            /*
             *  Open manually
             */

            $("#fancybox-manual-a").click(function() {
                $.fancybox.open('1_b.jpg');
            });

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5
                });
            });

            $("#fancybox-manual-c").click(function() {
                $.fancybox.open([
                    {
                        href : '1_b.jpg',
                        title : 'My title'
                    }, {
                        href : '2_b.jpg',
                        title : '2nd title'
                    }, {
                        href : '3_b.jpg'
                    }
                ], {
                    helpers : {
                        thumbs : {
                            width: 75,
                            height: 50
                        }
                    }
                });
            });


        });
    </script>


<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>



</head>

<body>

    <div id="wrapper">
        <div class="header clear">

            <h1 class="title"><a href="http://pandadol.com/">RACHEL SHI<br></a></h1>
            <h1 class="title">DESIGN + ILLUSTRATION</h1>


            <ul class="menu">
                <li class="first">Menu<div class="droparrow"></div></li>
                <li><a href="http://pandadol.com/info.html">about</a></li>
                <li><a href="http://twitter.com/pandadol">@pandadol</a></li>
                <li><a href="http://pandadol.tumblr.com">pandadol.tumbl</a></li>
                <li><a href="http://pinterest.com/pandadol">pinterest</a></li>
                <li><a href="http://instagrid.me/pandadol">instagram</a></li>
                <li><a href="/cv.pdf">cv</a></li>
            </ul>

        </div>

<div class="content">

            <div class="post-meta">


               <h1>The Candy Shop Project</h1>
               <div class="post-date"> 2012<P>
                                <b>Personal</b><br>
For 5 months I was a sales assistant at a candy shop. I took any lull in activity to draw customers. Here are the results.
               </div>
            </div>




                <div class="post-content">

    <p>
        <a class="fancybox" href="../pics/candyshop/1.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/1.jpg" alt="" / width="600px"></a>

        <a class="fancybox" href="../pics/candyshop/2.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/2_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/3.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/3_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/4.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/4_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/5.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/5_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/6.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/6_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/7.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/7_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/8.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/8_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/9.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/9_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/10.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/10_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/11.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/11_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/12.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/12_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/13.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/13_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/14.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/14_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/15.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/15_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/16.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/16_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/17.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/17_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/19.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/19_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/18.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/18_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/20.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/20_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/21.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/21_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/22.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/22_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/23.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/23_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/24.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/24_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/25.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/25_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/26.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/26_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/27.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/27_s.jpg" alt="" /></a>

        <a class="fancybox" href="../pics/candyshop/28.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/28_s.jpg" alt="" /></a>



    </p>

             </div>

如有任何建议，我们将不胜感激。谢谢!

Answer 1

这看起来像是一个简单的权限错误，因为当您尝试查看其中一张未加载的图像时 directly in a browser您会收到 403 Forbidden 响应。

7 号图片有一个额外的 fancybox.ajax 类，其他类没有，这可能导致您在对原始帖子的评论中提到的问题。