Search code examples
jqueryfancybox

Does the Fancybox instance need a reinitialise method?

I am trying to reinitialise a FancyBox instance after I've removed some items from the page, but can't find any available methods to do so; or any options to autoReinitialise when the DOM is manipulated. Am I missing something?

The problem is that when I now arrow-click through on items instantiated with the rel="group" attribute, I still see the 'removed' content.

I initialise Fancybox on jQuery's DOM Ready, like this:

$(".fancybox").fancybox();

The HTML element(s) looks like this:

<a class="fancybox" rel="group" href="http://localhost/myimages/image-1.jpg"></a>
<a class="fancybox" rel="group" href="http://localhost/myimages/image-2.jpg"></a>

I am using FancyBox Version 2. Any suggestions or comments?

Solution

  • Fancybox 2 doesn't include any destroy or update methods.

    For this reason, you'd need to fire the Fancybox method again. But please note you must use the .unbind method first and remove any events on the elements before you reinitialize Fancybox. See - How to destroy Fancybox? on how to mimic a destroy method.

    Short answer, update your DOM, unbind the event on all methods, then finally rebind by calling the Fancybox method again.