Simple jQuery Lightbox

by ajinkyax

HTML

<a class="lightbox" href="https://cloud.githubusercontent.com/assets/3184210/7199958/3a601be0-e516-11e4-8113-799b8c4bae3d.jpg"><img src="https://cloud.githubusercontent.com/assets/3184210/7246641/dafc751c-e81d-11e4-85d9-044b1a818a2c.jpg" alt="raspberry pi 2"></a>

CSS

/*
	Lightbox www.Ajinkyaxjs.com
*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background:#000 url(../img/loader.gif) no-repeat scroll center center;
}
#lightbox {
    position: fixed;
    z-index: 999;
}

JavaScript

//Lightbox
$(function() {

  $('.lightbox').on("click", function(e) {
	e.preventDefault();

    var windowHeight = window.innerHeight || $(window).height(),
      	windowWidth = window.innerWidth || $(window).width();

    // Create the overlay, append it to body and make it visible.
    $('<div id="overlay"></div>')
      .css('opacity', '0')
      .animate({
        'opacity': '0.5'
      }, 'slow')
      .appendTo('body');

    // Create the lightbox container which shall contain the image
    $('<div id="lightbox"></div>')
      .hide()
      .appendTo('body');

    // Create img-element and add to #lightbox when loaded.
    $('<img>')
      .attr('src', $(this).attr('href'))
      .css({
        'max-height': windowHeight,
        'max-width': windowWidth
      })
      .load(function() {
        $('#lightbox')
          .css({
            'top': (windowHeight - $('#lightbox').height()) / 2,
            'left': (windowWidth - $('#lightbox').width()) / 2
          })
          .fadeIn();
      })
      .appendTo('#lightbox');

    // Remove lightbox on click
    $('#overlay, #lightbox').on("click", function() {
      $('#overlay, #lightbox').remove();
    });

  });

});