0

HTML

<div class="test">
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
</div>

JQuery - updated

$('.fancybox').each(function(){
            $(this).fancybox({
                type: 'ajax',
                autoHeight: true,
                width: 930,
                autoSize: false,
                autoCenter: true,
                fitToView: false,
                topRatio: 0,
                arrows: false,
                closeBtn: true,
                closeClick: true,
                autoPlay: false,
                openSpeed: 1,
                closeSpeed: 'fast',
                closeClick: false,
                live: true,
                helpers: {
                    overlay: {
                        openSpeed: 'fast'
                    }
                }
            });
        });

Jsfiddle demo

Attempted with only

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

The first clicked link will open fancybox. Then the next clicked link will not open fancybox and just show blank overlay.

Noticed that if with parent.location.reload(true);, it worked by refreshing whole page and then show fancybox. That is not what I wanted. It should work every time click on different links and show fancybox without refresh.

Thought with ajax that it could get href to process and then show fancybox but it does not work :(

Another thing is that Fancybox seemed to be initialized more than once. How to prevent it from being initialized more than once?

Got error: `Uncaught TypeError: $(...).fancybox is not a function

Is there any way to make fancybox work without having to refresh page everytime click on link?

Updated

I edited the code above and it is still giving me trouble.

GuRu
  • 1,880
  • 3
  • 23
  • 32
joe
  • 1,115
  • 5
  • 21
  • 50
  • I know nothing about fancybox, but does `live: false` need to be `live: true`? – j08691 Jul 26 '15 at 16:31
  • possible duplicate of [Fancybox is not a function](http://stackoverflow.com/questions/3992054/fancybox-is-not-a-function) –  Jul 26 '15 at 17:25
  • how come the code in the fiddle looks like nothing in the question's code? – epascarello Jul 27 '15 at 17:54

1 Answers1

1

I think your problem here is that you are processing multiple ajax requests.

Fancybox supports ajax simply by using :

$("#various3").fancybox({
        ajax : {
            type    : "POST",
            data    : 'mydata=test'
        }
    });

and it views within it the results of the processed file in the href attribute called via AJAX.

So in your code, you do not need to process a jquery ajax and within it call the fancybox. Rather, you can call the fancybox in ajax mode and this shall do you the trick.

You can check the Official FancyBox Site for processing AJAX with it.

As for the initialization, this really depends on your fancybox js script loading. The fancybox javascript file shall be loaded once in your page.

Using $(element).fancybox({}) on html elements more than once does not re-initialize the current object within the element, but it resets it with the new call. In other words, the fancybox object is overridden in the element.

Updated :

Here is a working copy, just use the $.fancybox({}) on link click, prevent the default event behavior and set your desired location as the href element itself, make sure you only import jquery once so that you wont override it :

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


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

<div class="test">
<a href="/example/123.html" class="fancybox_ajax"> link 1</a>
<a href="/example/123.html" class="fancybox_ajax"> link 2</a>
<a href="/example/1236.html" class="fancybox_ajax"> link 3</a>
</div>

<script type="text/javascript">
        $(document).ready(function() {
    $('.fancybox_ajax').on('click', function(e){
                    e.preventDefault();

                    $.fancybox({
                        width: 400,
                        height: 400,
                        autoSize: false,
                        href: $(this).attr("href"),
                        type: 'ajax'
                    });
                });

});
    </script>

Last Update - Fixing jquery conflict issue

I got this to work by setting a new alias to the jquery library, the $ seem to conflict with another javascript library loaded afterward and it is not finding the fancybox plugin.. newFiddle

KAD
  • 10,972
  • 4
  • 31
  • 73
  • thanks for the explanation and yes i updated the code but it is still giving me trouble. The fancybox js file is in the layout template which is used sitewide so it shouldn't be causing problem but not sure why it was initialisation twice or thrice everytime. – joe Jul 26 '15 at 16:59
  • thanks and I still have trouble with fancybox repeating after click randomly on image links. it will append fancybox-overlay div more than once before showing fancybox popup. – joe Jul 28 '15 at 04:15
  • got it working finally. but the problem is that fancybox-lock class is not appearing on html tag on next click after first click. Do you have idea why it is not appearing? thanks again for your help – joe Jul 28 '15 at 04:58
  • if you can provide me sample of the code with all the key factors that it needs to run (css/js includes), I can get it working for you. – KAD Jul 28 '15 at 05:50
  • I got this to work by setting a new alias to the jquery library, the `$` seem to conflict with another javascript library loaded afterward and it is not finding the fancybox plugin.. [newFiddle](http://jsfiddle.net/fvf8kct5/1/) – KAD Jul 28 '15 at 07:07
  • test and it s still not showing fancybox-lock class on html tag on next click after first click. I tested your original code and it also showed same problem. – joe Jul 28 '15 at 07:20
  • the jsfiddle does not support ajax, move the code to your maching and make sure you are using a webserver to apply ajax functionality. I got to see the fancybox message `The requested content cannot be loaded. Please try again later.` , so it is working. – KAD Jul 28 '15 at 07:22
  • no i mean i am testing on my machine and it doesn't append fancybox-lock in html tag after first click. i also copied your code - but still cant get fancybox-lock class to appear – joe Jul 28 '15 at 07:25
  • i tested your code and mine to see what went wrong. I found that div of fancybox-wrap fancybox-desktop fancybox-type-ajax fancybox-opened is outside fancybox-overlay. it is not correct. First time click fancybox-wrap div was inside fancybox-overlay, but next clicks both are separate. So frustrating. – joe Jul 28 '15 at 09:50
  • There surely is a gap with what we are doing, just a small tip to settle this once and for all, just eliminate everything in your code and start by adding ur fancybox, just for a sungle element, then start gradually entering the other code and see when ur code breaks. This is never gonna workout this way here. – KAD Jul 28 '15 at 10:10