Asif18

Author:
{ Comments }

This tutorial will explain you about jQuery Lightbox. It’s a no–conflict jQuery script wont affect your other jQuery scripts used in your projects. Simple show(), hide() will make this ready to use jQuery Lightbox. It’s simple and free download and easy to integrate in your projects.  Below code will explain you how to make this simple jquery lightbox.

jquery lightbox free download - no conflict simple ready to use script

Step 1 Create a file called index.html:

<script type="text/javascript">
function load_as_lightbox(){ 
	var DocumentHeight = $(document).height();
	$('.as_lightbox_wrapper').css('height', DocumentHeight); // Set document height for As_Lightbox wrapper
}
function ShowLightBox(DivId){
	$('.as_lightbox_wrapper').show(); // Show the wrapper
	$('#'+DivId+'').show('slow'); // Show the Lightbox div, you can use another jQuery view functions such as fadeIn, fadeToggle for animations
}
function HideLightBox(DivId){
	$('.as_lightbox_wrapper').hide('slow'); // Hide the As_Lightbox wrapper
	$('#'+DivId+'').hide(); // Hide the div
}
$(document).ready(function(){
	load_as_lightbox(); // call this function after document loads
	$('#Show_Lightbox').click(function(){
		ShowLightBox('Simple_Lightbox'); // call the As_Lightbox show function
		return false;
	});
	$('#as_lightbox_close').click(function(){
		HideLightBox('Simple_Lightbox'); // call the As_Lightbox close function
		return false;
	});
});
</script>

Include jQuery file. In this script I have included jquery-1.9.1. Paste the above jquery lightbox code inside <head> section. In the above script load_as_lightbox(), ShowLightBox(), HideLightBox() will do the thing. load_as_lightbox() will create a Lightbox wrapper which will be the background of the lightbox. This function will execute immediately when document loads and get the document height and apply it to the lightbox wrapper (.as_lightbox_wrapper).


ShowLightBox() will display the particular div and its content in the lightbox. This function will show the popup wrapper and the div need to be shown in lightbox. Simple jQuery show() is using in this function to show run this dynamic lightbox.
HideLightBox() will hide the lightbox. It will set display = ‘none’ to the both lightbox wrapper and the lightbox content div. Simple jQuery hide() function is using here to hide those div’s.
Only the above simple three functions are using for run this simple jQuery lightbox. Its simple and ready to use. Some CSS need to be play here to complete the role. They are,

Step 2 create a file called style.css:

.as_lightbox_wrapper{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	background:url(../images/as_popup_wrapper_bg.png);
	display:none;
}
.as_lightbox_close{
	position:absolute;
	right:0;
	z-index:102;
	height:32px;
	width:32px;
	top:-25px;
	right:-25px;
	cursor:pointer;
}
.as_lightbox_container{
	z-index:101;
	position:fixed;
	width:500px;
	height:400px;
	background:#FFF;
	left:31%;
	top:13%;
	padding:10px;
	border-radius:2px;
	display:none;
}

Paste the above CSS code in the file called style.css. In this code class ‘as_lightbox_wrapper’ is the lightbox background which represents half transparency. I have used a half transparent image for avoid browser comp ability issues. It’s better to use images instead for CSS3 transparency for these kind of circumstances. This div positioned as absolute for shown as overlay from other divs’s and contents. This div should contain the z-index property to overcome and shown from other positioned div’s.


Class ‘as_lightbox_container’ is the parent div for the lightbox contents. This div’s z-index property should set at least above 1 from lightbox wrapper div. Then only the light box contents will be shown among the lightbox wrapper.


These things are enough for create a simple dynamic jQuery lightbox. Click the demo link for an online demo of this simple jQuery lightbox. Click the below download link for get the easy to modify jQuery lightbox script. Its simple and re-usable script can modify and ready to use in your purpose. It’s a simple light weight script with no conflict that can be modified easily.

Comments (0)