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>

3 comments:

  1. Hey there would you mind sharing which blog platform you're using?

    I'm going to start my own blog soon but I'm having
    a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most blogs and I'm looking for something unique.
    P.S Sorry for getting off-topic but I had to ask!

    ReplyDelete
  2. When someone writes an piece of writing he/she retains the idea of a
    user in his/her brain that how a user can be aware of it.
    So that's why this piece of writing is outstdanding. Thanks!

    ReplyDelete
  3. Woah! I'm really digging the template/theme of this
    site. It's simple, yet effective. A lot of times it's challenging to get that "perfect balance" between usability and appearance.
    I must say you've done a excellent job with this. In addition, the blog loads super
    quick for me on Internet explorer. Excellent Blog!

    ReplyDelete

^