jQuery deconstructors for plugins?

Question

I'm using the Galleria plugin inside an Accordion plugin to display images in a super cool way. A problem occurs, however, when I open up a new tab (in the accordion) then come back to the gallery tab. This is causing the galleria to be reinitialized which makes it fail.

I was wondering if there's a way to __deconstruct() a plugin so it can then be reinitialized when needed without causing problems?

$('.haccordion .header').click(function()
{
   /* ---- Gallery Code ---- */
   if ($(this).find('div').attr('title') == 'photogallery')
   {
      $('.gallery').galleria();

If I initialize the plugin on document.load (without checking for which tab gets opened) it loads the plugin but it's quite buggy. No images load, can't click things, etc... If I reload the plugin when div.photogallery it just causes failure altogether. Doesn't load.

So I'm guessing the only way to overcome this is somehow killing the plugin then reinitializing it?

Answer 1

The problem with removing a plugin is that the plugin isn't isolated as a single object somewhere that you can just remove, it's now spread all over a certain part of your code as events and styles attached to a lot of elements, and perhaps even extra elements added.

When you reinitialise the plugin it will overwrite it's own changes to the code, causing duplicates that clash and other problems. To reinitalise the plugin you would have to save a copy of the affected content before the plugin was initialised the first time, so you can restore that part of the code to the original state, before reinitialising the plugin.

However, if the plugin adds something to the window scope, you can't restore that by restoring part of the code. Either you would have to find out what the plugin does so that you can undo it, or you would have to reload the page.