17 Jan 2006

WP lightbox JS WordPress plugin

Are you looking for Lightbox 2 for WordPress update?


WP lightbox JS is a WordPress plugin that enable you to use lightbox JS script to overlay images on the current page. This plugin also adds a “Lightbox JS” quicktag to the post window in the WordPress admin section.

What is Lightbox JS


Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.


Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).


WP lightbox JS Features

  • Direct installation and no modification is needed.
  • Adds a quicktag for adding image with lightbox JS.
  • The “Lightbox JS” quicktag button will prompts you to add: Original image URL, Image caption, Image thumbnail, Width, Height and also thumbnail image description.
  • Automatically insert rel=”lightbox” to linked image (bmp, gif, jpeg, jpg and png).
  • Support keyboard keypress(x) to close the overlayed image (Lightbox JS changes January 19, 2006 10:40pm EST).

WP lightbox JS Installation

  1. Download WP lightbox JS into your wp-content/plugins/ directory.
  2. Extract the zip archive file. A new folder wp-lightboxJS will be added inside wp-content/plugins/ directory.
  3. Log into your WordPres blog administration panel, click on Plugins tab and activate “WP lightbox JS”.

How to use WP lightbox JS

  1. Excerpt from lightbox JS project page, Add rel=”lightbox” attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    Optional: Use the title attribute if you want to show a caption.

  2. Use the “Lightbox JS” quicktag button. The quicktag is created especially if you want to insert a thumbnail image that link with the original image with caption. There are 4 required values (Original image, thumbnail image, thumbnail image with and height) and 2 optional values (Image caption and image alt title). Example created by the quicktag:
    <a href="/images/me.png" rel="lightbox" title="This is image caption">
    <img src="/images/me.png" width="80" height="80" alt="This is image title" /></a>
  3. The plugin automatically insert rel=”lightbox” to linked image (bmp, gif, jpeg, jpg and png).

Plugin Known Bugs

  • Currently doesn’t work if your WordPress enable gzip compression. To disable please go to admin panel, click on Options tab and proceed to Reading Options. Untick “WordPress should compress articles (gzip) if browsers ask for them”.
  • Doesn’t work perfectly with the current release of K2 rev163 and below without applying my K2 lightboxJS patch (will be release soon). Only work on page without comments template. Possible workaround is to remove or relocate hideUtils() to HEAD. WP Lightbox JS patch for K2 is now available.
  • If any event onload exist and kickstart after lightbox, the script would not work.
  • The quicktags doesn’t work with Visual Editor (tinymce or Visual Editor) on.

To-do list

  • More WP lightbox JS quicktag.
  • Ability to change lightbox.css CSS color code and core image from admin panel.

Comment, bug report and suggestions are welcome.

Lightbox JS is written by Lokesh Dhakar. For more information and customization on the lightbox JS core file please proceed to Lightbox JS project page.