title: jquery fancybox thumbs - no thumbs - no slideshow
body: <p>I'm trying to get the fancybox thumbs to work properly.</p>
  
  <p>I've imported all the js / css file but it only shows the picture I've clicked on (with no thums and no slide show). I want every picture in the same page to load into the fancybox (w/thumbs) and the "alt" attribute as title on each picture. </p>
  
  <p>HTML: </p>
  
  <pre><code> .....
  &lt;a class="fancybox-thumb" rel="fancybox-thumb" href="/test.jpg"&gt;
     &lt;img src="test.jpg" alt="text showing"&gt;
  &lt;/a&gt; 
   .....
   ......
  &lt;a class="fancybox-thumb" rel="fancybox-thumb" href="/awesome.jpg"&gt;
     &lt;img src="awesome.jpg" alt="Awesome"&gt;
  &lt;/a&gt; 
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('.fancybox-thumb').each(function () {
  $(this).attr('rel', 'fancybox-thumb').fancybox({
      helpers: {
          type: 'image',
          openEffect : 'none',
          closeEffect : 'none',
          title : {
              type: 'inside'
          },
          overlay : {
              opacity: 0.8,
              css: {
                  'background-color' : '#000'
              }
          },
          thumbs : {
              width: 50,
              height: 50
          }
      },
      beforeLoad: function () {
          this.title = $(this.element).find('img').attr('alt');
          this.href = $(this.element).find('img').attr('src').replace('_thumb', '');
      }
  });
  });
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <pre><code>$('.fancybox-thumb').fancybox({
  prevEffect: 'none',
  nextEffect: 'none',
  closeBtn: true,
  arrows: true,
  nextClick: false,
  helpers: {
      thumbs: {
          width: 50,
          height: 50
      },
      title : {
          type: 'inside'
      }
  },
  beforeLoad: function () {
      this.title = $(this.element).find('img').attr('alt');
  }
  });
  </code></pre>