JSFiddle - React, Tailwind, and code Playground

by rupesx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<div class="main"></div>

CSS

.main{
    width:200px;
}

img{ max-width:100%;}

JavaScript

$( '.main' ).on('click', '.img-insert', function (e) {
	$('.modal-trigger').leanModal();

	});

var loop = setInterval(function(){
	var i = 0;
		$('.main').append(
            "<div class='img-insert'> <a href='' class='modal-trigger'><img src='http://wallpaperscraft.com/image/74149/1920x1280.jpg' class='img-responsive' /></a><div class='modal' id=''> <div class='modal-content'> <img src='http://wallpaperscraft.com/image/74149/1920x1280.jpg' /><a href='javascript:void(0);' class='modal-action modal-close'><span class='mdi-navigation-close'></span></a></div> "
        )
        
        $( ".img-insert .modal-trigger" ).each(function(){
			 $(this).attr("href", "#img" + i++);
		});
		$( ".img-insert .modal" ).each(function(){
			var imgHref = $(this).prev().attr("href");
			var modalRefId = imgHref.substr(1);
			$(this).attr("id", modalRefId);
		});
    

},1000);

window.setTimeout(function(){ clearInterval(loop); }, 5000);