Display Photos In Your Blog With Lightbox

Posted by photonovice on April 11th, 2008

A bit of tech talk here. :-) I just started to use Lightbox written by Lokesh Dhakar for displaying photos in my articles. For the geeks Lighbox utilizes Prototype JavaScript Framework and Scriptaculous Effects Library. For the less geeky ones it means that it is neither Flash nor Java, but a really light Javascript based solution.
I followed the easiest way of implementing it for my blog: since I use Wordpress as my blog engine I simply installed the Wordpress plugin made of the original script by Giuseppe Argento.

Here is a small example how it is working. Just click on any of the images below. You can navigate between the photos with the right and left keys of your keyboard and also by clicking on the small right and left arrows that appear when you move your mouse over the zoomed image. You can close the image viewer by pressing escape or clicking on close or just outside the viewer.

martin_szipal2.jpg Nikkor 17-55 DX portrait11.jpg

Here is how you can create such a thing:

<a href=”http://big_image_1.jpg” title=”Title that appears on the zoomed image rel=”lightbox[setID]“><img src=”http://small_image_1.jpg” /></a>
<a href=”http://big_image_2.jpg” title=”Title that appears on the zoomed image rel=”lightbox[setID]“><img src=”http://small_image_2.jpg” /></a>

I made some minor configuration changes on lightbox.js accelerating the window resizing animation and decreasing the opacity.

overlayOpacity: 0.5, // default: 0.8 controls transparency of shadow overlay
animate: true, // default: true toggles resizing animations
resizeSpeed: 10, // default: 7 controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable

You might also play around with your lightbox.css file if you want a different look’n'feel. I was happy with the default one.

Pro’s of using Lightbox:

  • easy to use
  • smaller images embedded in the text
  • stylish look

Con’s of using Lightbox:

  • configuration requires some CSS/Javascript knowledge

Final comment : according to the Flickr Community Guidelines, when you use an image stored on Flickr you must link back to the original source of the file i.e. the Flickr page of the photo. From within Lightbox you cannot do that so you are not encouraged to use Lightbox with images stored on Flickr.

3 Responses to “Display Photos In Your Blog With Lightbox”

  1. photographyVoter.com Says:

    Display Zoomable Photos In Your Blog With Lightbox…

    Wondering how to display small image in the text of your blog and zoom in by clicking?…

  2. photonovice.net » Blog Archive » Portrait Photography Class - Session #5 Says:

    [...] Display Photos In Your Blog With Lightbox [...]

  3. Greg Says:

    FocalPower uses the same basic concept with our sharing widgets. Except we take it even further by giving you control over the meta data displayed in the lightbox, maximize the image displayed to the browser’s monitor size, and more planned for the near future…

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word