JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="wrapper">

<ul>
	<li>
		<a href="http://chinlandtoday.info/wp-content/uploads/2013/10/Cherry-Blossom-Lake-Sakura-Japan.jpg" class="lightbox-trigger">View Photo</a>
	</li>

	<li>
		<a href="http://chinlandtoday.info/wp-content/uploads/2013/10/Cherry-Blossom-Lake-Sakura-Japan.jpg" class="lightbox-trigger">View Photo</a>
	</li>

	<li>
		<a href="http://chinlandtoday.info/wp-content/uploads/2013/10/Cherry-Blossom-Lake-Sakura-Japan.jpg" class="lightbox-trigger">View Photo</a>
	</li>
</ul>

</div>

CSS

body {
    margin:0; 
    padding:0; 
    background:#efefef;
    text-align:center; /* used to center div in IE */
}
.wrapper {
    width:600px; 
    margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/
    background:#fff; 
    text-align:left; /*resets text alignment from body tag */
    border:1px solid #ccc;
    border-top:none; 
    padding:25px; 
    /*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
    border-radius:0 0 5px 5px;
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px; 
    box-shadow:0 0 5px #ccc;
    -moz-box-shadow:0 0 5px #ccc;
    -webkit-box-shadow:0 0 5px #ccc;
}

li {list-style:none;}

.lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:url('http://www.compton.in/resource/overlay.png') repeat; 
    text-align:center;
}

.lightbox p {
    text-align:center; 
    color:#000; 
    margin-right:20px; 
    font-size:12px; 
}

.lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:340px;
}

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(500);


        }

        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);

	});
});