JSFiddle - React, Tailwind, and code Playground

by Yuriy Bablyukh

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<img data-fancybox-width="300" data-fancybox-height="300" style=" margin: 5px 15px; border: 1px solid black;" src="http://fancyapps.com/fancybox/demo/2_b.jpg" alt="" width="228" height="152">
    
    <img data-fancybox-width="300" data-fancybox-height="300" style=" margin: 5px 15px; border: 1px solid black;" src="http://fancyapps.com/fancybox/demo/1_b.jpg" alt="" width="228" height="152">
        
        <img data-fancybox-width="300" data-fancybox-height="300" style=" margin: 5px 15px; border: 1px solid black;" src="http://fancyapps.com/fancybox/demo/3_b.jpg" alt="" width="228" height="152">
            
            <img data-fancybox-width="300" data-fancybox-height="300" style=" margin: 5px 15px; border: 1px solid black;" src="http://fancyapps.com/fancybox/demo/4_b.jpg" alt="" width="228" height="152">

JavaScript

for(var i=0; i<$('img').size();i++){
var ss=$('img').get(i); 
$(ss).replaceWith("<a rel='gallery1' id='test_"+i+"' class='fancybox' href='" + $('img')[i].attributes.src.value + "'></a>" );
$("#test_"+i).append(ss);  
}
$(".fancybox").fancybox();