JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="elgol sunset (matty brooks)">
	<img src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" alt="" />
</a>

<div class="hidden">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Frondaisons (Valentin le luron)">
	<img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt="" />
</a>

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg" title="The cold morning (Raimondas Ka.)">
	<img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" />
</a>

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Silhouettes (una cierta mirada)">
	<img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" />
</a>

</div>

CSS

.hidden {
    display: none;
}

JavaScript

$(".fancybox-thumb").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        helpers: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });