Image gallery with lightbox effect using Jquery

Image gallery with light box effect using Jquery plugin, here i'm going to use jquery.fancybox jquery plugin to perform this image gallery lightbox effect. this may helpful for your designing work. let see the coding details.

DOWNLOAD                       LIVE DEMO

this gallery light box must need jquery min file, and the fancybox jquery and fancy box css must be needed for this lightbox effect.

JQUERY

<link rel="stylesheet" type="text/css" href="style/jquery.fancybox-1.3.1.css" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
// Fancy LightBox
$("a[rel=group]").fancybox({
'transitionIn'      : 'elastic',
'changeFade'        : 'fast',
'transitionOut'     : 'elastic',
'titlePosition'     : 'over',
'overlayOpacity'    : '0.6',
'showCloseButton'   : false,
'overlayColor'      : '#000000',
'titleFormat'       : function(title, currentOpts) {
return '<span id="fancybox-title-over">'+ (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });
});
</script>

must have to get the above three files.

CODE

you mention the name, what you have given in the image link in a tag, we must have to call that in the script, as we did in the above.  

<ul class="ulclass">
  <li>
      <a href="img/images/1.jpg" rel="group">
      <img src="img/images/1.jpg" width="250" height="150" alt="Fun :-)., Ha ha ha.." align="right" />
      </a>
  </li>
  <li>
      <a href="img/images/2.jpg" rel="group">
      <img src="img/images/2.jpg" width="250" height="150" alt="Beautifuk girl" align="right" />
      </a>
  </li>
  <li>
      <a href="img/images/3.jpg" rel="group">
      <img src="img/images/3.jpg" width="250" height="150" alt="Pistal" align="right" />
      </a>
  </li>
  <li>
      <a href="img/images/4.jpg" rel="group">
      <img src="img/images/4.jpg" width="250" height="150" alt="Arunkumar maha" align="right" />
      </a>
  </li>
  <li>
      <a href="img/images/5.gif" rel="group">
      <img src="img/images/5.gif" width="250" height="150" alt="2my4edge arunkumar maha" align="right" />
      </a>
  </li>
  <li>
      <a href="img/images/6.jpg" rel="group">
      <img src="img/images/6.jpg" width="250" height="150" alt="Illusion" align="right" />
      </a>
  </li>
</ul>

that's it.  i hope this post will help you to make light box in simple manner.

RELATED POSTS :

Image slider with random animation effects using Jquery

Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js