<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
helpers: {
thumbs: {
width : 40,
height : 40,
source : function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
</script>
</head>
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/1_s.jpg" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Open #1</a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg">Open #2</a>