jQuery LightBox

Used by naukri.com

by ankit90_anand

HTML

<body>
	<div>
        <h3>Minimum configration</h3>
		<input id="trigger1" value="Trigger 1" type="button">
        <div id="container1" class="lightbox">
           <div class="code">$('#trigger1').lightBox({"ltBox":$('#container1')});</div>
        </div>
    </div>
    
    <div>
        <h3>Responsive lightbox</h3>
		<input id="trigger2" value="Trigger 2" type="button">
        <div id="container2" class="lightbox">
			<div class="code">		
                $('#trigger2').lightBox({
                    "ltBox":$('#container2'),
                    "dimens":{"width":"50%"}
                });        
            </div>
        </div>
    </div>
    
    <div>
        <h3>Reset form inside lightbox on open or close</h3>
		<input id="trigger3" value="Trigger 3" type="button">
        <div id="container3" class="lightbox">
        	<form>
            	You are
            	<input type="radio" name="radio"> Male
                <input type="radio" name="radio"> Female
            </form>
            <div class="code">		
                $('#trigger3').lightBox({
                    "ltBox":$('#container3'),
                    "dimens":{"width":"50%"},
                    "resetForm":true
                });  
            </div>      
        </div>
    </div>
    
    <div>
        <h3>Floating lightBox</h3>
		<input id="trigger4" value="Trigger 4" type="button">
        <div id="container4" class="lightbox">
        	<form>
            	You are
            	<input type="radio" name="radio"> Male
                <input type="radio" name="radio"> Female
            </form>
            <div class="code">		
                $('#trigger4').lightBox({
                    "ltBox":$('#container4'),
                    "dimens":{"width":"50%"},
                    "resetForm":true,
                    "fixed": true
                });  
            </div>      
        </div>
    </div>
    
    <div>
        <h3>Animate lightBox</h3>
		<input id="trigger5" value="Trigger 5"...

CSS

body {
    height:1000px;
}
.lightbox {
    background:white;
    padding:10px;
    border-radius:5px;
}
.code {
    background:#c2c2c2;
    padding:15px 25px;
    ;
}
.ltCont, .ltLayer { -moz-box-sizing: border-box; box-sizing: border-box; }

.ltCont, .ltLayer { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }

.lightbox { display: none; }

.ltCont.close { display: none; }
.ltCont .lightbox_open { display: block; }

.ltLayer { background: #000; -moz-transition: opacity 0.3s; transition: opacity 0.3s; }
.ltLayer.open { opacity: 0.5; filter: alpha(opacity=50); }
.ltLayer.close { opacity: 0; filter: alpha(opacity=0); }

.flipOpen, .flipClose { -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; -ms-transform-origin: 50% 0 0; transform-origin: 50% 0 0; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; }

.flipOpen { -webkit-transform: perspective(1300px) rotateX(0deg); opacity: 1; -webkit-transform: perspective(1300px) rotateX(0deg); -moz-transform: perspective(1300px) rotateX(0deg); transform: perspective(1300px) rotateX(0deg); opacity: 1; }

.flipClose { -webkit-transform: perspective(1300px) rotateX(-60deg); opacity: 0; -webkit-transform: perspective(1300px) rotateX(-60deg); -moz-transform: perspective(1300px) rotateX(-60deg); transform: perspective(1300px) rotateX(-60deg); opacity: 0; }

JavaScript

/* jslint curly : false	 */
/* jslint asi : true	 */
/*global pageXOffset */
/*global pageYOffset */

/*Start of lightBox*/
(function($){
 /** Refered : JQuery UI Code */
 /** Detects focusable element */
function focusable(element, isTabIndexNotNaN) {
	var map, mapName, img,
		nodeName = element.nodeName.toLowerCase();
	if ("area" === nodeName) {
		map = element.parentNode;
		mapName = map.name;
		if (!element.href || !mapName || map.nodeName.toLowerCase() !== "map") {
			return false;
		}
		img = $("img[usemap=#" + mapName + "]")[0];
		return !!img && visible(img);
	}
	return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled :
		"a" === nodeName ?
		element.href || isTabIndexNotNaN :
		isTabIndexNotNaN) &&
	// the element and all of its ancestors must be visible
	visible(element);
}

function visible(element) {
	return $.expr.filters.visible(element) && !$(element).parents().addBack().filter(function () {
		return $.css(this, "visibility") === "hidden";
	}).length;
}

$.expr[":"].focusable = function (element) {
	return focusable(element, !isNaN($.attr(element, "tabindex")));
};	
 /** Refered : JQuery UI Code */
 
/** Some common Utility functions*/
var util = {
	is_options_valid : function(options){
		if(!options || !options.ltBox || (options.ltBox.prop('nodeType') !== 1)){
			return false;
		}
		return true;
	},
	is_animtion_support : function(){
		/** Need to be relooked */
		return window.navigator.userAgent.match(/MSIE (7|8|9)/)=== null;	
	},
	switchClass:function(a,b){
		this.removeClass(a).addClass(b);
	}	
};

/** Singleton Pattern */
/**
	If options are given each time a new object will be returned otherwise last configure object will be returend
 */
$.fn.lightBox = function (options) {
    var obj = null;		
	if (util.is_options_valid(options)) {
		$.each(this,function(a,b){
			var _this = $(b);
			obj = new constructor(options,_this);
			_this.data('lt_Box', obj);
		});
	}	
    return this.data('lt_Box') || obj;
};

var...