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.
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.









April 11th, 2008 at 1:56 pm
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?…
April 11th, 2008 at 2:10 pm
[...] Display Photos In Your Blog With Lightbox [...]
April 12th, 2008 at 12:44 am
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…