A little LightBox to lighten up your day

February 13, 2007

I found this snappy tool called LightBox over the weekend and really wanted to test it out. For those of you unsure of what LightBox is and what it does please click the image below to see a sample.

deer

As I talked about the other day in my CSS article, Lightbox, is a JavaScript/AJAX component used to give a slicker look and feel to Overlay Images on a website. I’d always wondered what created those sexy image overlays on sites like SitePoint.com so when I found this I was more then happy to play around with it.

Installing LightBox in WordPress is pretty damn simple because a number of people have built plugins for WordPress to use this awesome. The one that I used can be found at 4mj.it. It’s as simple to install as loading the files you have downloaded to your /wp-content/plugins directory and then activating them in Wordpress in the Plugins section. Next simply apply the following code to the image you want to use, with the correct path and you should be good to go.

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>my funky image #1</a>

You can swap out the image path for your own and just keep the rel=”lightbox” and you can add any images with this feature into your site. If you want to load a group of photos the easiest way to do that is to use this way of coding them…

<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]”>my funky image #1</a>

<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]”>my funky image #2</a>

<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]”>my funky image #3</a>

And so on…

In this case you would simply rel=”lightbox[roadtrip]” and use it for what ever images you’d like to create using LightBox as a grouping of images. This becomes a great thing when you are dealing with galleries that you want to use LightBox with this function is a perfect fit.

Lucas

Posted by Lucas | Filed Under General, Tips, Tricks and Tools 

Comments

2 Responses to “A little LightBox to lighten up your day”

  1. Setting up Shop in WordPress on February 21st, 2007 8:48 pm

    […] Full image display using Lightbox […]

  2. Update: Lightbox JS 2.02 recently released on March 9th, 2007 6:13 pm

    […] I wrote about a month ago, Lightbox JS, is one slick little script that you can use to enhance your site.  For those of you […]

Got something to say?





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