Lightbox 1.0

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:right; 
    color:#fff; 
    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() {
   
    //Begin Lightbox
    $('.lightbox-trigger').click(function(e){
         e.preventDefault();   
    
                                 
    var image_href = $(this).attr('href');
    
    if ($('#lightbox').length > 0 ) {
        
         //place href as the image value
        $('#content').html('<img src="' + image_href + '">');
        
        //show the lightbox window
        $('#lightbox').show();
        
        
    }
 
    else {
         
        var lightBox = 
       
        '<div id="lightbox">' +
         '<p class="close">Click to close</p>' +
          '<div id="content">' +
            '<img src="' + image_href + '">' +
         
            '</div>' +
            '</div>';
         
        $('body').append(lightBox);
    
    
    }    
});    

    
        $( "#lightbox" ).live( "click", function( event ) {
            $('#lightbox').hide();
});

        $(document).on('click','#lightbox', function() {

               alert('Document clicked');

        });
});