0

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?

Theunis
  • 436
  • 3
  • 14
  • In theory, you don't need to do anything after removing content since fancybox v2.x supports the `live` method for dynamically added/removed content, but it depends on what you understand by "removing" content and how do you do it http://jsfiddle.net/9g1onkvk/ – JFK May 14 '15 at 04:42
  • @JFK , I actually removed and added new items with AJAX. It seemed to me that using the rel="group" attribute did not update the 'index' of the items in the environment I created. After adding/removing multiple items it did not chronologically 'page' trough when clicking the nav button. Your JSFiddle, using the rel="gallery" attribute, does however do exactly what I need it to do. Thanks. – Theunis May 14 '15 at 06:44

1 Answers1

1

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.

Community
  • 1
  • 1
James
  • 442
  • 2
  • 13
  • 2
    In theory, you don't need to do anything after removing content since fancybox v2.x supports the `live` method for dynamically added/removed content so firing the fancybox method again is redundant http://jsfiddle.net/9g1onkvk/ – JFK May 14 '15 at 04:44
  • @JFK I should have tested my theory in a fiddle first. Thanks for sharing this, I learnt something new today :) – James May 14 '15 at 08:37