FancyBox returning “The requested content cannot be loaded. Please try again later.” with link

Question

I\'m using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to

Answer 1

I just ran into this issue as well.

As it turns out, the href url is EXTRA case sensitive. (if that is possible)

Regardless double, triple check your href urls to insure that you have the case exactly correct.

Answer 2

I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)

Hope this helps.

Answer 3

my solution was:

    <script type="text/javascript">
    jQuery(document).ready(function() {

        $(".fancybox").click(function() {
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'none',
                'titleShow'     : false,
                'showCloseButton': true,
                'titlePosition' : 'inside',
                'transitionOut' : 'none',
                'title'         : '',
                'width'         : 640,
                'height'        : 385,
                'href'          : this.href,
                'type'          : 'iframe',
                'helpers'     : { 
                                'overlay' : {'closeClick': false}
                                }

            });

            return false;
        });
    });
    </script>

Answer 4

If some of the images are showing and others are not, even though the markup is identical, then check this:

1. Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
2. Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!

Answer 5

My problem was giving inappropriate path to image e.g;

<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>

While the images loaded well locally, It could not do online. Correcting the path solved the problem.

<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>

Answer 6

I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as @BrettBumeter mentioned. In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be). Altering this solved my issue.