About This Entry

This page contains a single entry posted on 30 April 2007 08:38 AM.

The PREVIOUS post in this blog is titled > Comparing Joomla vs Drupal Content Management Systems - Part I/II.

The NEXT post in this blog is titled > Lunarpages Web Hosting Increases Storage to 350-GB.

MORE entries can be found on the main index page or by looking through the archives.


Technorati search

» Blogs that link here

June 2013

Sun Mon Tue Wed Thu Fri Sat
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29


Rad Linkage

Powered by
Movable Type 3.35
This weblog is licensed under a Creative Commons License.
Creative Commons License

« Comparing Joomla vs Drupal Content Management Systems - Part I/II | Main | Lunarpages Web Hosting Increases Storage to 350-GB »

Lightbox2 Image Overlay (JavaScript)

Morning at the Newport Back Bay: Newport Beach, California (Test of Lightbox2)Test of Lightbox2 image overlay JavaScript (by Lokesh Dhakar, from Boston).

Click the thumbnail image (of the Newport Back Bay) to your right, and a larger version *should* pop-up .. in a cool-looking overlay, with the rest of the page assuming a smoked-glass appearance.

Web site designers like Lightbox because it allows the reader (you) to view an image (or images) without taking you away from the page you're reading. Simply click the Close button, and you return here (never really left).

I like it cuz it allows me to display a photo on a separate "page" (so to speak), with a black background, without having to create a separate web page (*.htm), such as I did > here. Plus it opens with a cool animated ("fancy pants") launcher, perfectly centered.

••••• today's entry continues below •••••

Without Lightbox, an image without an accompanying web page looks like > THIS (not very pretty). And you know I'm no fan of white backgrounds (like staring at a 100-watt lightbulb).

Lightbox uses JavaScript to accomplish this simple (but cool) effect. I installed it in the new blog .. thanks to LoTGoD's instructions.

You basically upload a few JavaScript files to your site, reference those scripts in the pages where you want to use Lightbox, and call up the Lightbox script by including the tag: rel="lightbox" into the link.

In the blog, I have a little problem, cuz the WYSIWYG plug-in (TinyMCE) I use eliminates the rel tag (mentioned earlier) when I use the WYSIWYG feature. So I have to do the final rebuild using raw-code format. No biggie, but not perfect.

Lightbox v2.03.2 was just released today. It has considerable COOL factor. As a side note, I really dig the design of the Lightbox page > clean, simple, uncluttered, easy-to-navigate menus, attractive color scheme. Well-organized content.

Okay, seems to be working. That was easy. Cool, huh?

Update > received a bunch of mail from readers saying it's working for them, too, in a variety of browsers.

HERE is another picture of the Newport Back Bay (also using Lightbox), taken at sunset. Lightbox can be used with any kind of link: either text or graphic.

You can also configure *sets* of images (more than one), but I haven't figured out how to do that, as I haven't yet found a need.

Wonder if I could get Lighbox to work in the Rad forums? Probably not, cuz it uses UBB code. I noticed a check-box below the box where new posts are made, which says, "Check this if you'll be adding code (or don't like smileys)." I tried adding lightbox code with that box checked, but it didn't work. I mean, my code simply becomes text.

For more along these lines, here's a Google search preconfigured for the query > lightbox image overlay javascript


TrackBack URL for this entry:

Comments (7)


Test of alogblog's MTy plug-ins CCode & TCode to help prevent Comment & Trackback spam:



REbuilding my site and trying to use LightBox, but running into same 'rel=' strip problem. What did you mean by 'final rebuild using raw-code format.'?


Are you using the EEE plug-in with Movable Type?

If so, see here:


.. where it says "Show toggle buttons" ..

"checking this box will allow you to toggle the editor on/off."

If you toggle OFF the editor, you are presented with (what I call) Raw HTML code, which doesn't strip out the rel tag (until you save your entry .. then upon subsequent loading, it will automatically revert back to 'ON').

See here for more:



I deleted the Lightbox plug-in cuz it was costing me nearly 200-KB .. bad web site optimization for a feature used so little.


Your example flat out doesn't work.


yeah, i upgraded the blog to MTOS:


.. then upgraded the version of Lightbox, which i later discovered is incompatible with the version this page is coded to work with. Hence the non-workage.

I could fix it, but have been busy with other things.

Also, I don't like that lightbox uses nearly 200-KB.

Add up the sizes of the files required to make it run and you see what i mean.

For a photo-display site/page, that would be okay, but for a regular page like this, 200-KB is a bit much for effects, which may or may not be utilized.

It *is* a cool effect, and it *did* work. Trust me. =)


It's a very interesting article. Thank you very much! Lightbox is both useful and beautiful as an effect!

Post a comment