liteBox

HTML

<a href="http://slant.investorplace.com/files/2013/09/google_logo.jpg" target="_self" id="image-1">View Image</a>

CSS

a{
    display:inline;
}

.litebox {
	    display: none;
	    width: 100%;
	    min-width: 280px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 99999999;
	}
	.litebox .litebox-clearfix:after {
	    display: block;
	    width: 0;
	    height: 0;
	    overflow: hidden;
	    clear: both;
	    visibility: hidden;
	    content:" ";
	}
	.litebox .litebox-clear {
	    display: block;
	    width: 0;
	    height: 0;
	    overflow: hidden;
	    clear: both;
	    visibility: hidden;
	    content:" ";
	}
	.litebox .litebox-close {
	    width: 40px;
	    height: 40px;
	    background: #000;
	    opacity: .7;
	    position: absolute;
	    top: 20px;
	    right: 20px;
	}
	.litebox .litebox-close:hover {
	    opacity: 1;
	    cursor: pointer;
	}
	.litebox .litebox-container {
	    min-width: 100px;
	    min-height: 100px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	}
	.litebox .litebox-error {
	    -webkit-border-radius: 10px;
	    -moz-border-radius: 10px;
	    border-radius: 10px;
	    padding: 20px;
	    background: #1B1B1B;
	    color: #FFF;
	    text-align: center;
	    text-shadow: 1px 1px 0 #000;
	    line-height: normal;
	    cursor: pointer;
	}

JavaScript

$('#image-1').on('click', function() {
    $('body').liteBox();
});

;(function ($, window, document, undefined) {
    var pluginName = 'liteBox',
        defaults = {
            html: null,
            revealSpeed: 400,
            background: 'rgba(0,0,0,.8)',
            overlayClose: true,
            closeButton: true,
            escKey: true,
            navKeys: true,
            slideshow: false,
            callbackInit: null,
            callbackBeforeOpen: null,
            callbackAfterOpen: null,
            callbackBeforeClose: null,
            callbackAfterClose: null,
            errorMessage: 'This request could not be processed.'
        };

    function liteBox(element, options) {
        $this = this;
        this.element = element;
        this.$element = $(this.element);

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    function winHeight() {
        return window.innerHeight ? window.innerHeight : $(window).height();
    }

    function adjustContainerPos() {
        containerWidth = $container.width(),
        containerHeight = $container.height();

        $container.css({
            'margin-top': '-' + containerHeight / 2 + 'px',
            'margin-left': '-' + containerWidth / 2 + 'px'
        });
    }

    liteBox.prototype = {
        init: function () {
            // Variables
            $litebox = $('<div>', { 'class': 'litebox' }),
            $close = $('<div>', { 'class': 'litebox-close' }),
            $container = $('<div>', { 'class': 'litebox-container' }),
            $error = $('<div class="litebox-error">' + this.options.errorMessage + '</div>'),
            keyEnter = 13,
            keyEsc = 27,
            keyLeft = 37,
            keyRight = 39;


            // Callback
            if ($.isFunction(this.options.callbackInit)) this.options.callbackInit.call(this);

            // Element click
          ...