Language: CSS3, jQuery & HTML5

Steps to Implement:

Step 1 : Download jQuery Form ›

JQuery inside the <head> tags in Html


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


Attribute to “”;


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


Step 2 : Create a Image Gallery

<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″>

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>

width: 100%;
top: 0;
left: 0;
display: none;
border: 10px solid #121217;
margin: 7% auto;
width: 752px;
float: right;
position: absolute;
top: 14%;


Step 5: Use the jQuery code

<script type=text/javascript>

var address= $(this).attr(src);


Learn Website Design with Html tutorial taught by Website Designer India and SEO Services 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>