JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<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>

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        helpers: {
            thumbs: {
                width  : 40,
                height : 40,
                source  : function(current) {
                    return $(current.element).data('thumbnail');
                }
            }
        }
    });