Overlay & Slideshow Images with Lightbox 2

| Posted by watashii | Filed under Programming, Web

The Lightbox2 plugin uses the Prototype and Scriptaculous JavaScript libraries to create an overlay effect of opening up images on top of a web page, and creating a navigable slideshow view.

Setting this up on your own web page is an easy 2-step process: include the JavaScript and CSS on the header, and then on each link tag embed the rel=”lightbox” and title=”my caption” attributes.

[Demo]
[Download Source Files]

Notes: I had to include the following CSS due to the background overlay didnt cover the entire page.

<style type="text/css">
body{margin: 0; padding:0;}
</style>

Share:

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Print
  • email

Related Posts:

  1. A Better LightBox Using jQuery
  2. Syntax Highlight Code On Any Page Using Google Code Prettify
  3. Get URL Variables in JavaScript & HTML

Tags: , , ,

Permalink | November 15th, 2008

One Response to “Overlay & Slideshow Images with Lightbox 2”

  1. blog.watashii » Blog Archive » A Better LightBox Using jQuery Says:
    November 16th, 2008 at 1:55 am

    [...] plugin is an improvement over the LighBox2 plugin which was demonstrated earlier, because we didn’t need to modify our link tags to activate [...]

Leave a Reply