JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="wrapper">
    <li><a href="http://static.guim.co.uk/sys-images/Travel/Late_offers/pictures/2011/10/6/1317920324542/Hirosaki-Castle-Japan.-007.jpg" class="lightbox-trigger">View Photo</a></li>
    <li><a href="http://static.guim.co.uk/sys-images/Travel/Late_offers/pictures/2011/10/6/1317920324542/Hirosaki-Castle-Japan.-007.jpg" class="lightbox-trigger">View Photo</a></li>
    <li><a href="http://static.guim.co.uk/sys-images/Travel/Late_offers/pictures/2011/10/6/1317920324542/Hirosaki-Castle-Japan.-007.jpg" class="lightbox-trigger">View Photo</a></li>
</div>

CSS

body {margin: 0 auto; text-align:center;}

.lightbox {width:70%; margin: 0 auto;}
.lightbox img {max-width:100%;}

JavaScript

$(function() {


	$('.lightbox-trigger').click(function(e) {
	 e.preventDefault();

	 var img_href = $(this).attr('href');

	 if ( $('.lightbox').length > 0 ) {

	 	$('.content').html('<img src="' + img_href + '">');

	 	$('.lightbox').fadeIn(600);
	 }

	 else {

	 	var lightBox =

			'<div class="lightbox">' +
				'<p class="close">Close</p>' +
				'<div class="content">' +
					'<img src="' + img_href + '">' +
				'</div>' +
			'</div>';	 	

			$('body').append(lightBox);

	 }


	});

	$(document).on('click','.close', function() {

		$('.lightbox').fadeOut(600);

	});


});