Question

158

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

rated 0 times [ 159] [ 1] / answers: 1 / hits: 103524 / 13 Years ago, wed, january 18, 2012, 12:00:00

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 the new page, I get The requested content cannot be loaded. Please try again later. error.

The FancyBox javascript is as follows:

<script type=text/javascript>

    $(document).ready(function() {

        $(.fancybox).fancybox().hover(function() {

            $(this).click();

        });

        $(#fancybox-outer).fancybox().mouseleave( function() {

               $(#fancybox-overlay).click();

         });

    });

</script>

And applies to the following clip of HTML:

<li class=fancybox-outer>

    <a id=inline href=#hover-image_0 class=fancybox>

        <img src=http://website.com/file/id:63 style=margin-top: 32px />

    </a>

    <p><a href=http://website.com/template/view/18>1G2A</a></p>

    <div style=display: none;><div id=hover-image_0><a href=http://website.com/template/view/18><img src=http://website.com/file/id:64/ext:.png class=img /></a></div></div>

</li>



<li class=fancybox-outer>

    <a id=inline href=#hover-image_1 class=fancybox>

        <img src=http://website.com/file/id:60 style=margin-top: 32px />

    </a>

    <p><a href=http://website.com/template/view/17>17</a></p>

    <div style=display: none;><div id=hover-image_1><a href=http://website.com/template/view/17><img src=http://website.com/file/id:61/ext:.png class=img /></a></div></div>

</li>

Does anyone see what might be causing the issue or what I need to correct?

Thanks!

Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.

I still need help with this issue. Anyone have any ideas?

Thanks!

Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ronniem

Add To Favorites

Follow

Total Points: 584

Total Questions: 111

Total Answers: 111

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

answered 13 Years ago grayson · Accepted Answer

Your approach has many issues:

First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link

<a class=fancybox href={target} ...

should be bound to fancybox via the following script in order to work

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

Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error The requested content cannot be loaded. Please try again later. in other words, the link (inside the inline content) <a href=http://yahoo.com ... is not bound to fancybox.

The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)

Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.

Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here

Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:

1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script

$('.fancyframe').fancybox({

 'type':'iframe',

 'width': 600, //or whatever you want

 'height': 300

});

2: within your hidden inline content set that class to the link, so this code:

<div style=display: none;>

 <div id=hover-image_0>

  <a href=http://www.yahoo.com><img src=1_b.jpg class=img /></a>

 </div>

</div>

now should look like

<div style=display: none;>

 <div id=hover-image_0>

  <a class=fancyframe href=http://www.yahoo.com><img src=1_b.jpg class=img /></a>

 </div>

</div>

Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)

SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.