2

I'm experiencing a problem with Fancybox on my portfolio. It works on every page but one - http://pandadol.com/candyshop.html.

Images 7, 8, 9, 11, 12, 13, 23, 24, 25, 27 give me a "requested content cannot be loaded error", and opening them up in a new tab returns "You don't have permission to access /pics/candyshop/7.jpg on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."

All the images are definitely on the server. Here is the code -

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

Any advice would be appreciated. Thank you!

PDL
  • 23
  • 1
  • 3
  • They may be on the server, but have you checked the permissions of each file? Try finding an offending file, go to 'Get info', and change the permissions to 777. If that fixes the problem, well.. – Jezen Thomas Nov 02 '12 at 07:11
  • Maybe this would help: http://stackoverflow.com/questions/8366976/wamp-error-forbidden-you-dont-have-permission-to-access-phpmyadmin-on-this – kayen Nov 02 '12 at 07:23
  • @JezenThomas Changed it for 7.jpg. Now when I click it the image itself opens in a new tab, not as a pop-up box. – PDL Nov 02 '12 at 07:28

1 Answers1

3

This looks like a simple permissions error as when you try and view one of the non-loading images directly in a browser you get a 403 Forbidden response.

Image no 7 has an additional fancybox.ajax class not present on the others which is probably causing the issue you mention in your comment to your original post.

Tom Davies
  • 1,860
  • 3
  • 16
  • 18