title: Add nav dots to fancybox
body: <p>I want to add basic navigation dots to my fancybox slideshow.</p>
  
  <p>Example here: 
  <a href="http://fancyapps.com/fancybox/" rel="nofollow">http://fancyapps.com/fancybox/</a></p>
  
  <p>But I cant get this to work. Not sure if I am editing the JS in the right place.</p>
  
  <p>It's driving me crazy - any help would be great.</p>
  
  <p>Thanks</p>
  
  <p><strong>Here is my html:</strong></p>
  
  <pre><code>&lt;a class="fancybox-thumb" rel="gallery1" href="images/index/Dwayne5.jpg" &gt;     
                          &lt;!--slideshow image 1--&gt;
  
  &lt;img src="images/index/artfuldogerthumbnail.jpg" alt="main icon" /&gt;
                            &lt;!--This is the little image on page--&gt;
  &lt;/a&gt;
  
  
  
  
  &lt;a class="fancybox-thumb"rel="gallery1"href="images/index/artfuldogerthumbnail.jpg" title="colour dodger"&gt; 
                              &lt;!--slideshow image 2--&gt;
  
   &lt;/a&gt;
  
   &lt;a class="fancybox-thumb" rel="gallery1"href="images/index/sheree.png" title=""&gt;
   &lt;/a&gt;
                              &lt;!--slideshow image 2--&gt;
  </code></pre>
  
  <p>****Here is my JS**** </p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function() {
          $(".fancybox-thumb").fancybox({
              prevEffect  : 'none',
              nextEffect  : 'none',
              helpers : {
                  title   : {
                      type: 'outside'
                  },
                  thumbs  : {
                      width   : 50,
                      height  : 50
                  }
              }
          });
      });
  
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $(".fancybox").fancybox();
          });
  
          $.fancybox.helpers.thumbs.onUpdate = function() {};
      &lt;!-- Above line stops thumbnails moving) --&gt;
  
  
  &lt;/script&gt;
  </code></pre>