Lightbox

Just a quick post about my foray into Lightbox. I started messing with this while writing about Flickr the other day, and after a bit of tweaking, I got it working.

You could just follow the steps on this page, but installing the plugin for WordPress is probably easier. The first, however, will allow you to use Lightbox wherever and however you like, while the latter will only work inside WP.

I, of course, followed the steps to do it manually (mostly because I didn’t find the plugin until after I was done and had it working *sigh* ). Something I discovered that might be of interest to you is that, while the instructions technically allow Lightbox to work, it 1) doesn’t tell you everything you need to do and 2) doesn’t necessarily work right on blogs.

First, when you upload and extract the files, it is assumed that you’re putting those in the root of your web server. I had put them elsewhere, and subsequently it wasn’t working.

However, because they assume root (once you get them moved there), going to a specific blog entry will prevent Lightbox from working. Essentially, all the code in the JS and CSS files point to root or ../images for everything. Which is great, and works just fine on my main page (http://mstublefield.com), but when I go to a blog post (for instance, https://mstublefield.com/blog/2008/09/24/why-i-dont-use-flikr/), going to ../images actually points at https://mstublefield.com/blog/2008/09/24/images (the ../ being “go up one level”).

So, I went through the JS files and the CSS file and changed the links from dynamic to static. Therefore, instead of ../images/close.png, it became https://mstublefield.com/images/close.png. Instead of js/whatever, it became https://mstublefield.com/js/whatever. This allows Lightbox to work inside specific blog posts, as well as on the main page. The only files that need edited are the lightbox.js and the CSS file.

Secondly, the CSS file wasn’t quite working for me. The instructions say to put it somewhere and their files will point to it. Instead, I had to manually copy/paste the CSS and append it to my main stylesheet. This seemed to work a lot better for some reason. Maybe it’s that I didn’t have the CSS in the right place, but regardless, it was easier just to copy the code over.

Between adding ZenphotoPress and Lightbox, I’m pretty excited about adding more pictures to my blog 🙂

2 thoughts on “Lightbox

  1. Hi,
    did you actually manage to make ZenphotoPress and Lightbox work together?
    It’s something I always wanted to do, but never had time to properly test and develop.

  2. Re: Simbul

    Yeah, though it’s not exactly automatic. All ZenphotoPress really does is automate the linking of the photos. The photo it displays in the blog post is the thumbnail automatically generated by Zenpress, and then the photo is hyperlinked to the full-size image (by ZenphotoPress).

    You then have to go into the HTML and manually add the rel=”lightbox” tag after the href (hyperlink). So it’s not fully user-friendly (yet!), but it does build the hyperlink for you and you just have to add the rel statement.

    Hope this helps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s