title: fancybox not working as expected
body: <p>I followed the code in this jsfiddle and wrote everything in a single html file.<br>
  What is missing as it is not working as shown in jsfiddle?
  <a href="http://jsfiddle.net/kevin11189/uZCC6/1270/" rel="nofollow noreferrer">http://jsfiddle.net/kevin11189/uZCC6/1270/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      .hidden {
          display: none;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /&gt;&lt;/a&gt;
  
      &lt;a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /&gt;&lt;/a&gt;
  
      &lt;a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /&gt;&lt;/a&gt;
  
      &lt;a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /&gt;&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;script language="JavaScript"&gt;
  
      $('.fancybox-thumbs').fancybox({
          prevEffect : 'none',
          nextEffect : 'none',
  
          closeBtn  : true,
          arrows    : false,
          nextClick : true,                
  
          helpers : {
              thumbs : {
                  width  : 50,
                  height : 50
              }
          }
      });
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>**Total newbie here!</p>