fancybox not working as expected
<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>