Simple jQuery Lightbox Effect Tutorial

By Deepanker in Code Snippet. Updated on May 25, 2012.

Lighbox effect is now an important part of webdesign. It looks good and works in many different kind of situations. Few weeks back, I wrote on creating lightbox effect with CSS only. In this tutorial i am going to show how you can create a lightbox effect with the help of jQury.

See the demo code below. Change content, look and feel and size of the lightbox as per your need

jQuery Lightbox Effect

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<title>A simple jQuery light box</title>
<style type="text/css">
body {
 margin:200px 0 0 400px;
 font-family:"arial";
}
.lightBox {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 100px;
background-color: #f2f2f2;
border: solid #606060 2px;
display: none;
z-index: 100;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
<script type="text/javascript">
$(function() {
$(".show").click(function(){
$(".lightBox").fadeIn("slow");
});
$(".close").click(function(){
$(".lightBox").fadeOut("slow");
});
});
</script>
</head>
<body>
<h2>A simple jQuery light box Demo.. </h2>
<div class="lightBox">
<h3>This is the lightbox content. Change this content to waht you want</h3>
<a href="#" class="close">Close Light Box</a>
</div>
<a href="#" class="show">Click Show Light Box</a>
</body>
</html>

Copy this code and paste it into any HTM file. Run the file in the browser and see the effect.

Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

0 Comments

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.