title: Fancybox Image Counter
body: <p>I am using Fancybox Version 1.3.4.  I am trying to include an image counter (Image X of Y) and a "CLOSE X" button at the bottom of my image gallery using Fancybox. I have read several postings that have attempted to solve this, and I have changed my code based on the answers provided, but I still can't seem to correctly code this issue. </p>
  
  <p>Here is the code I have corrected:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $("a[rel=gallery]").fancybox({
          'transitionIn'      : 'fade',
      'transitionOut'     : 'fade',
      'titlePosition'     : 'inside',
      'titleFormat'       : function(title, currentArray, currentIndex,      currentOpts) {
  return '&lt;div id="gallery-title"&gt;Image ' + (currentIndex + 1) + ' of ' +   currentArray.length + (title.length ? ' &amp;nbsp; ' + title : '') + '&lt;/span&gt;';
              }
          });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  &lt;a rel="gallery" href="images/MapDesignImageGallery/full/1.png" title="First Bulgarian            Tsardom (Advanced Cartography/GIS Map of the Year)***PUBLISHED***" id="image1"&gt;
  &lt;img src="images/MapDesignImageGallery/thumbnails/1.jpg" width="150" height="185" /&gt;   &lt;/a&gt;
  </code></pre>
  
  <p>Any advice is greatly appreciated. Thanks.</p>