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 cheap seo service kolkata, if You need any support for web design services places contact Som Creative Solutions

Leave a Reply

Your email address will not be published.

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>