indialight_box

Language: CSS3, jQuery & HTML5

Steps to Implement:
————————–

Step 1 : Download jQuery Form › jQuery.com

JQuery inside the <head> tags in Html

<head>

<script type=text/javascript src=jquery-1.5.2.min.js ></script>

</head>

Attribute to “http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”;

<head>

<script type=text/javascript src=http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js ></script>

</head>

Step 2 : Create a Image Gallery

<div>
<img src=images/imge1.jpg class=thumbnail width=”127″>
<img src=images/imge2.jpg class=thumbnail width=”127″>
<img src=images/imge3.jpg class=thumbnail width=”127″>
</div>

Step 3 : Create a Lightbox Display Block

<div id=popup>
<div id=center>
<img id=lightbox src=images/imge1.jpg >
<img id=close src=images/imge1.png alt=close >
</div>  <!– #center –>
</div>  <!– #popup –>

Step 4 : Use the CSS code

<style type=text/css>

#popup{
background:#000001;
height:100%;
width: 100%;
position:fixed;
top: 0;
left: 0;
display: none;
}
#center{
border: 10px solid #121217;
margin: 7% auto;
width: 752px;
}
#close{
float: right;
position: absolute;
top: 14%;
}

</style>

Step 5: Use the jQuery code

<script type=text/javascript>

$(document).ready(function(){
$(.thumbnail).click(function(){
var address= $(this).attr(src);
$(#popup).fadeIn(slow);
$(#lightbox).attr(src,address);
});
$(#close).click(function(){
$(#popup).fadeOut(fast);
});

 

Learn Website Design with Html tutorial taught by Website Designer India and if You need any support for web design services places contact Som Creative Solutions

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>