JSFiddle - React, Tailwind, and code Playground

by Stphane

HTML

<script src="http://demo.dev7studios.com/wp-content/uploads/nivo-lightbox/nivo-lightbox.min.js"></script>
<link rel="stylesheet" href="http://demo.dev7studios.com/wp-content/uploads/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" href="http://demo.dev7studios.com/wp-content/uploads/nivo-lightbox/themes/default/default.css">
<div id="nivo-lightbox-demo">
	<h2>Single Images</h2>
	<p>
		<a data-lightbox-gallery="gallery1" title="&nbsp;" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg">
			<img alt="demo alt!1" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_s.jpg" />
		</a>
		<a data-lightbox-gallery="gallery1" title="&nbsp;" href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg">
			<img alt="demo alt!2" src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_s.jpg" />
		</a>
		<a data-lightbox-gallery="gallery1" title="&nbsp;" href="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_b.jpg">
			<img alt="demo alt!3" src="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_s.jpg" />
		</a>
		<a data-lightbox-gallery="gallery1" title="&nbsp;" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg" data-lightbox-hidpi="http://farm5.staticflickr.com/4046/4589556958_43525ecd34_b.jpg">
			<img alt="demo alt4!" src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_s.jpg" />
		</a>
	</p>
</div>

JavaScript

$(document).ready(function () {
    var navHandler = function(element){
        if(element[0])
            element = element[0][0];
        var title = $(element).children().attr('alt');
        $(element).attr('title', title);   
        $('.nivo-lightbox-overlay .nivo-lightbox-title').html(title);
    };
    $('#nivo-lightbox-demo a').nivoLightbox({
        effect: 'fade',
        beforeShowLightbox: function(){navHandler(this.el);},
        onPrev: navHandler,
        onNext: navHandler
    });
});