CODEWITHSUNDEEP
jqueryfancybox
sumone
sumone

Reputation: 408

How to reinitialize (recall) FancyBox after AJAX updated DOM?

I'm using widgetkit plugin (Joomla CMS), for lightbox. Since widgetkit uses fancybox to display lightbox im posting a question here.

FancyBox works great when i'm not using AJAX technology to update the content of the Joomla website. When i enable AJAX, and refresh or move to another page using ajax technology lightbox effect is gone - the image itself opens in a new window. I think this is because AJAX updates the DOM and FancyBox doesn't recognize that. I do have in the plugin of AJAX code an area, where i can write certain JavaScript code, that will AJAX execute after the website is fully loaded by AJAX. I'm just wondering what should i type in there, to initialize the FancyBox to the new DOM, that AJAX just generated.

For mootools lightbox (if i had it) i could simply write this line: window.fireEvent('domready');

I don't know how to do that for jQuery FancyBox.

I also posted the same question here (if anyone needs more information): http://skrij.me/Qv56

Upvotes: 2

Views: 6960

Answers (2)

Eugene Chernomor
Eugene Chernomor

Reputation: 21

You need to create fucntion for initialize fancybox e.g.

function fancybox_init(){
        $("a[href*='.jpg'], a[href*='.png']").attr('rel', 'fancybox').fancybox({
            maxWidth  : 800,
            maxHeight : 600,
            fitToView : true,
            width     : '70%',
            height    : '70%',
            autoSize  : true,
            closeClick    : false,
            openEffect    : 'none',
            closeEffect   : 'none'
        });
    }

And then after ajax reload page or adding new block simply call this function in success callback of ajax method

Upvotes: 2

Janis
Janis

Reputation: 8769

You either call fancybox (e.g., $(".fancybox").fancybox();) each time you make changes to the DOM or use version 2 that uses "live" to attach click handler

Upvotes: 2

Related Questions