title: Ad Gallery Fancybox
body: <p>I have the following code to enable Fancybox to work with the jQuery Ad-Gallery plugin - The Ad gallery displays thumbnails and a main image which changes when selecting a different thumbnail. </p>
  
  <p>At the moment, clicking on the larger image triggers fancybox but it is not possible to navigate through the other images within the gallery. I have tried adding a class and rel to all of the images within the gallery but this doesn't do anything? I think because the larger image is only loaded from the gallery when the thumbnail is clicked so possibly fancybox cannot find the next image to display? Is there any way to force fancybox to load the next image in the gallery/thumbnail list?</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>&lt;div id="gallery" class="ad-gallery"&gt;
  &lt;div class="ad-image-wrapper"&gt;&lt;/div&gt;
  &lt;div class="ad-nav"&gt;
  &lt;div class="ad-thumbs"&gt;
  
  &lt;ul class="ad-thumb-list"&gt;
  &lt;li class="list-thumb"&gt;
  &lt;a href="/image1.jpg" class="fancybox" rel="gallery"&gt;
  &lt;img src="/image1.jpg"  alt="" class="image" /&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;li class="list-thumb"&gt;
  &lt;a href="/image2.jpg" class="fancybox" rel="gallery"&gt;
  &lt;img src="/image2.jpg"  alt="" class="image" /&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function() {
  var galleries = $('.ad-gallery').adGallery();
  });
  $(document).ready(function(){
  
  $(document).on("click", ".ad-image", 
   function()  
  {
  $.fancybox.open({
  href : $(this).find("img").attr("src"),
  closeBtn: false,
  closeClick : true,
  openEffect : 'elastic',
  openSpeed  : 450,
  closeEffect : 'elastic',
  closeSpeed  : 450,
  });
  });
  });
  &lt;/script&gt;
  </code></pre>