Archive for the ‘lightbox-2’ Category

Adventures with Lightbox 2

Wednesday, September 15th, 2010

Tonight, I decided to tackle how photos are displayed on my blog. I did not like the way clicking on an image led to another page on my site, where visitors had to click on the image again to view a larger version of the photo.

I discovered Lightbox 2 after doing some extensive Google searches for the best WordPress image plugins. Once again, this might be the “long” way (I’ll expand more on this below), but here’s the short version of how my very time-consuming process with installing it on my site went:

First, here is why I think I might have gone the “long” route with this plugin. I searched for Lightbox and activated it through the Plugins link on my blog. However, I didn’t know how to get it working at this point, so I resorted to following the directions on the WordPress page, which tells users to download the zipped plugin, load it to the file manager, and then activate the plugin. When I opened my file manager, a Lightbox 2 file already existed. I still uploaded the zipped file. So, perhaps searching for the plugin through your blog and activating it will let you skip the cPanel/File Manager steps? Either way, here’s how my process went:

Locate Lightbox 2 in the plugin directory at and click “Download Version 2.9.2.”

Locate the Lightbox-2 file on your computer.

Unless it is already saved there, move the Lightbox file to your desktop. Right click it and select “Compress lightbox-2″ into a zip file.

Login to cPanel and click File Manager.

When the File Manager Directory Selection box appears, select Web Root (public_html/www) and click Go.

Once in your File Manager:

Expand public.html.

Expand blog.

Expand wp-content.

Expand plugins.

Make sure the box at the top of the screen says /public_html/blog/wp-content/plugins.

Click Upload and load your Lightbox zip file. Return to your blog and Activate the plugin (*this is where I’m wondering if you can immediately do this upon installing it through your blog and avoid cPanel/File Manager).

At this point, I got confused. I didn’t know how to get the plugin to overlay images on the same page, so I turned to Google. I found a lot of forums that mentioned CSS and HTML, so I switched from Visual to HTML in an earlier post and began to play around. This was a mistake, because I ended up with this (so glad WordPress lets you switch back to an earlier revision!):

I restored that page to an earlier draft and ditched it to experiment on a different post. On a whim, I clicked “Link to Image,” saved my new draft, and clicked on my test image to discover…Lightbox was working!

I went through each of my posts and selected “Link to Image” for each photograph. Now, instead of being transferred to another page to see a larger image, the screen darkens to display a highlighted image:

Of course, the feature isn’t without its flukes. Here’s what happened when I was double-checking each photo to make sure it was Lightbox activated.

A simple page refresh erased my panic:

Lastly, be sure to visit your Lightbox 2 settings page and check “Shrink large images to fit smaller screens” so the images don’t take up your whole screen!

This took me a long time to figure out, but I think it is actually very simple. If one of the forums I visited about installing the plugin had simply instructed bloggers to upload an image and select “Link to Image,” this process would have been much faster. I like this feature, so the time was well worth it!