JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

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

<a href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

JavaScript

// fancyBox v2.0 Next of X Solution, Auto assign title to all images on page.
//www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm
//http://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array
//All credit goes to JFK of fancybox.net
//Alexander Dixon 07-06-2015

$("a").each(function(index) {    
    var titleName = $(this).closest("a").find("img").attr("src").toString().split('/').splice(-1,1);
    var anchorIndex = "a:eq(" + index + ")";
    $(anchorIndex).attr("title", titleName).attr("rel", "img_gallery");
});

$("a[rel=img_gallery]").fancybox({
    helpers: {
        title: {
            type: 'over'
        }
    },
    // helpers
    beforeShow: function() {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    } // beforeShow
}); // fancybox