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
Comments (7)
Test of alogblog's MTy plug-ins CCode & TCode to help prevent Comment & Trackback spam:
http://alogblog.com/movabletype/plugins/ccode_and_tcode_for_mt_33_version/
Posted by Rad | May 1, 2007 10:35 AM
Posted on May 1, 2007 10:35
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.'?
Posted by Len | June 15, 2007 2:42 PM
Posted on June 15, 2007 14:42
Are you using the EEE plug-in with Movable Type?
If so, see here:
http://plugins.movalog.com/enhancedentryediting/manual
.. 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:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=7021
Posted by Rad | June 15, 2007 5:51 PM
Posted on June 15, 2007 17:51
I deleted the Lightbox plug-in cuz it was costing me nearly 200-KB .. bad web site optimization for a feature used so little.
Posted by Rad | October 7, 2008 5:11 PM
Posted on October 7, 2008 17:11
Your example flat out doesn't work.
Posted by MST | March 10, 2009 11:54 AM
Posted on March 10, 2009 11:54
yeah, i upgraded the blog to MTOS:
http://mt4.radified.com/
.. 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. =)
Posted by Rad | March 10, 2009 3:03 PM
Posted on March 10, 2009 15:03
It's a very interesting article. Thank you very much! Lightbox is both useful and beautiful as an effect!
Posted by Jocuri | December 29, 2009 4:10 AM
Posted on December 29, 2009 04:10