• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Lightbox - overlay picture for image galleries

Most popular script for web galleries is Lightbox, it overlays image over the page, thus expanding it for full size view and gives control to move to next or previous picture or close the overlaid picture. And it has an easiest set up.

There are to ways to use it:

  1. with Prototype Framework and Scriptaculous Effects Library.
  2. with jQuery JavaScript library

Using Prototype Framework and Scriptaculous Effects Library

Include needed files into <head></head> tags:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Create a link to images and add rel attribute with value lightbox to each (optional: add any comments as a value of title attribute):

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Using jQuery JavaScript library

Again included needed files into <head></head> tags:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

And now many options comes here, you can create similar link with rel attributes as in first example, or just create div let's say with id gallery and include all links inside without rel attributes(same thing that i previous example applies to title attribute), and just use this code:

<script type='text/javascript'>
    $(function() {
        $('#gallery a').lightBox();

And that's all

You may also be interested in:

Powered by

blog comments powered by Disqus