chevron_left

Problem:

I am working on Fancybox for the very first time I am trying to display the inline content (it is a div with the image linked to the new page). My div and image are displayed properly in a modal but if an image is clicked to navigate to a new page then in that case I face the below message:

"The requested content cannot be loaded. Please try again later."
Please find below my FancyBox javascript for your reference:

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

Can someone help me in fixing my fancy box error.

Solution:

I have already figured out the reason which is causing this issue for you. The error is likely to occur when you have the class on one of the elements that is a same as a popup class.

For example see below code:

<a class="popup" href="#">Open the popup</a>

And you have the something in the popup with a same class name for example:

<div class="popup">some text</div>

You will face the fancybox error. So you need to change your div class to something like the popup-window and simply use below code to call your fancybox actions:

$("a[rel=gallery]").fancybox();

Above changes will certainly fix your fancybox error.

Thanks

More Posts

Failed to send your message. please try later or contact the administrator by another method. cf7 Farkhanda Athar - Aug 15, 2020
uncaught typeerror: cannot read property 'geteditor' of undefined Alecxe01 - Nov 13
uncaught typeerror: cannot read property 'defaults' of undefined Alecxe01 - Nov 13
Uncaught typeerror: cannot read property 'adatasort' of undefined. Alecxe01 - Nov 10
Uncaught typeerror: cannot read property 'queryselector' of null. Alecxe01 - Nov 3
When you declare a function you include open and close parentheses after the name of the function sakshi - Sep 4
Intro to java programming comprehensive version 10th edition. Tania - Sep 7
html5 video autoplay not working in chrome ahsanhanif99 - Aug 22
Automatic image slider in html css javascript ahsanhanif99 - Aug 21
Html horizontal scroll tab auto center onclick ahsanhanif99 - Aug 19