AD Gallery: How to reinitialize the gallery after editing the HTML

At Coffeescripter jQuery AD Gallery, you can find the jQuery plugin called AD Gallery. In the comments, you can read that two people want to know how to destroy the gallery so that they can reset it (search for ‘destroy’ on the page if you’re interested).

I’ve had the issue of wanting to reset the gallery as well, because it doesn’t work well with jQuery’s .hide() and .show() methods, which you’ll encounter if you ever use a tabbed layout for a page with the gallery on one of these tabs. (At my job, AD Gallery has been used for quite a while and we haven’t gotten around to trying out other galleries yet. Since using a tabbed layout is also new, I only encountered this problem recently.)

First-time initializing

In short, you set up your HTML like so:


<div class="ad-gallery">
  <div class="ad-image-wrapper">
  </div>
  <div class="ad-controls">
  </div>
  <div class="ad-nav">
    <div class="ad-thumbs">
      <ul class="ad-thumb-list">
        <li>
          <a href="images/1.jpg">
            <img src="images/thumbs/t1.jpg" title="Title for 1.jpg">
          </a>
        </li>
        <li>
          <a href="images/2.jpg">
            <img src="images/thumbs/t2.jpg" longdesc="http://www.example.com" alt="Description of the image 2.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

and initialize your gallery, like so:


$('.ad-gallery').adGallery();

For advanced options, see the AD Gallery page I linked to above.

Editing the HTML

Next, if applicable, you can change the HTML in .ad-thumb-list to


<ul class="ad-thumb-list">
	<li>
	  <a href="images/1.jpg">
		<img src="images/thumbs/t1.jpg" title="Title for 1.jpg">
	  </a>
	</li>
	<li>
	  <a href="images/2.jpg">
		<img src="images/thumbs/t2.jpg" longdesc="http://www.example.com" alt="Description of the image 2.jpg">
	  </a>
	</li>
	<li>
	  <a href="images/3.jpg">
		<img src="images/thumbs/t3.jpg" longdesc="http://www.example.com" alt="Description of the image 3.jpg">
	  </a>
	</li>
  </ul>

or it could be that, like me, you’re applying .hide() and .show() to the gallery which breaks the .ad-image-wrapper content. Either way, you’ll run into trouble and you’ll want some way to reset the gallery.

Inspecting the AD Gallery source code

Don’t create a new gallery instance by doing $('.ad-gallery').adGallery(myAdGalleryOptions); again, this is costly and may cause conflicts. What you want to do is remove some DOM-elements that the gallery created and then call the ‘init’ method of the gallery again. Let me explain.

If you inspect the source code for AD Gallery, you’ll see the following bits of code.

Line 52:


$(this).each(function() {
  var gallery = new AdGallery(this, settings);
  galleries[galleries.length] = gallery;
});
// Sorry, breaking the jQuery chain because the gallery instances
// are returned so you can fiddle with them
return galleries;

Line 131:


function AdGallery(wrapper, settings) {
  this.init(wrapper, settings);
};

Line 159:


init: function(wrapper, settings) {
  var context = this;
  this.wrapper = $(wrapper);
  this.settings = settings;

This means that once the AD Gallery was initialized, it has stored references to the wrapper and settings that were supplied in the initialization function. If we want to re-initialize the gallery, we store a reference to it and call the init function again, with the wrapper and settings that were stored in the already existing object πŸ™‚

Furthermore, there’s the following bit.
Line 237:


this.controls = this.wrapper.find('.ad-controls');
this.gallery_info = $('<p class="ad-info"></p>');
this.controls.append(this.gallery_info);

Line 244:


this.preloads = $('<div class="ad-preloads"></div>');
...
this.loader.hide();
$(document.body).append(this.preloads);

The .ad-controls element is edited by the gallery, the gallery_info element is placed inside .ad-controls, specifically in .ad-info. Furthermore, this.preloads is appended to the document.body. These are all used by the gallery to keep track of the currently shown element (gallery_info), a countdown for the automatic slider (.ad-controls) and the large images (preloads). We want to clear those first, and then when we call the init method again, the gallery will generate a new .ad-controls element, a new gallery_info element and a new preloads element. Note that we don’t really have to remove .ad-preloads, but I think it’s good practice to do so, clean up what you don’t need.

The code for reinitialization

HTML:


<div id="mygallery" class="ad-gallery">
  <div class="ad-image-wrapper">
  </div>
  <div class="ad-controls">
  </div>
  <div class="ad-nav">
    <div class="ad-thumbs">
      <ul class="ad-thumb-list">
        <li>
          <a href="images/1.jpg">
            <img src="images/thumbs/t1.jpg" title="Title for 1.jpg">
          </a>
        </li>
        <li>
          <a href="images/2.jpg">
            <img src="images/thumbs/t2.jpg" longdesc="http://www.example.com" alt="Description of the image 2.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<input type="button" value="Click me! Edit gallery content" id="button1">
<input type="button" value="Click me! Reinitialize gallery" id="button2" style="display:none;">

JavaScript:


var galleries = $('#mygallery').adGallery();
$('#button1').click(function(){
	$('#mygallery .ad-thumb-list').html('<ul class="ad-thumb-list"><li><a href="images/1.jpg"><img src="images/thumbs/t1.jpg" title="Title for 1.jpg"></a></li><li><a href="images/2.jpg"><img src="images/thumbs/t2.jpg" longdesc="http://www.example.com" alt="Description of the image 2.jpg"></a></li><li><a href="images/3.jpg"><img src="images/thumbs/t3.jpg" longdesc="http://www.example.com" alt="Description of the image 3.jpg"></a></li></ul>');
	$('.ad-preloads').remove();
	$('#mygallery .ad-controls').html('');
	$('#button2').show();
	$(this).remove();
});
$('#button2').click(function() {
	galleries[0].init(galleries[0].wrapper, galleries[0].settings);
	$(this).remove(); 
});

Note: Here, I’m ignoring the fact that the galleries array may contain multiple objects, in my case there’s just one galleries object, but if you’ve got multiple galleries on one page you’ll have to deal with that.

The end result


That’s it πŸ™‚ I’m sure that by now this problem is outdated for most people, but who knows, someone might benefit from this πŸ˜‰

0 Replies to “AD Gallery: How to reinitialize the gallery after editing the HTML”