JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="open_fancybox" data-index="3" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>

CSS

.hidden {
    display: none;
}

JavaScript

// Ref : http://stackoverflow.com/q/16901753/1055987
// JFK : http://stackoverflow.com/users/1055987/jfk
$(".open_fancybox").click(function () {
    // detect if data-index exists otherwise index = 0 (first image)
    var theIndex = $(this).data("index") ? $(this).data("index") - 1 : 0;
    $.fancybox.open([{
        href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title: '1st title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
        title: '2nd title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
        title: '3rd title'
    }, {
        href: 'http://fancyapps.com/fancybox/demo/4_b.jpg',
        title: '4th title'
    }], {
        padding: 0,
        index: theIndex // set what index should the gallery start from
    });
    return false;
});