Image gallery with lightbox effect using Jquery | 2my4edge

20 September 2013

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.
image gallery with lightbox

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>

No comments:

Post a Comment

^