JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

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 title="Singapore from the air (Andrew Tan 2011)" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg"><img alt="demo alt!" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_s.jpg" /></a>  <a title="forest mood (halina-anna)" href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg"><img alt="" src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_s.jpg" /></a>  <a title="311111 AUTUMN AT OSBORNE (THE ANCIENT MATELOT)" href="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_b.jpg"><img alt="" src="http://farm7.staticflickr.com/6115/6309906627_b5706c42e4_s.jpg" /></a>  <a title="This image is different if HiDPI" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg" data-lightbox-hidpi="http://farm5.staticflickr.com/4046/4589556958_43525ecd34_b.jpg"><img alt="" src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_s.jpg" /></a>

</div>

JavaScript

var altText;
$(document).ready(function () {
    $('#nivo-lightbox-demo a').nivoLightbox({
        effect: 'fade',
        beforeShowLightbox: function () {
            altText = $($(this)[0].el).find('img').prop('alt');
        },
        afterShowLightbox: function (light) {
            if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
        }
    });
});