Cathus Photography Blogs

Aug 07 2008

Adding Photos to a Post with Lightbox

Posted by: Garry in Tutorials

Lightbox is a rather nice feature which enables you to click on a thumbnail of a photo & have it open up in the centre of the screen while the rest of the web page behind is dimmed out of view.

If you want to see what effect this has check out my own Photography Blog at blog.glnphotography.com on which I use the Lightbox feature exclusively.

This tutorial will show you how to use the Lightbox feature to add photos to your Photography Blog

The key to using is to have 2 versions of each photo, a thumbnail & the fullsize photo. You enter the thumbnail shot into the text of your post & when it’s clicked on, it opens the full-size version.

There is a Plugin with all Cathus Photography Blogs called ‘Slimbox’ which is a version of Lightbox, you don’t need to worry about the differences. In order to use it though, you need to get your hands a little dirty by delving into the HTML code side of the post entry editor. It’s not too difficult & this tutorial should have you up & running in no time.

The effect we want is as follows; click on the photo of a Falcon I took at a countryside fair in the Spring:

Neat, huh?

All I’m doing differently is adding some extra Lightbox code to the URL for the pic. If I was to enter the photo using the usual method I’d get the following code:

which shows me that I’ve posted the thumbnail version of the photo & when I click on it, the thumbnail version will be viewed (pretty pointless as we want to view the full size, I know, but we’ll change that in a minute)

All I need to do to show the fullsize version of the pic is reference it in the first part of the code. The pic is called img_3322.jpg & the thumbnail is img_3322-thumb.jpg. if I remove the “-thumb” part of the first link, when I click on the thumbnail it will pull up the full-size version.

Do it now & use the back button to get back here:

Hopefully, it opened the full-size version of the photo of my Falcon. But we want to use the Lightbox to display the pic so we need to add some code.

In your post, switch over to the HTML view & locate the code for the photo. here is the amended version displaying the thumbnail but calling the full-size version:

We need to add this code - rel=”Lightbox” - to the first part of the code, thus:

Now we get the Lightbox effect to display the photo - fantastic.

But Lightbox has some other tricks up it’s sleeve. You want to add a title to the photo? No problem, all we do is add a Title Tag to the code - title=”Picture of a lovely falcon” - I;d add it to the end of the first tag, just after the “img_3322.jpg” thus:

Notice the title displayed at the bottom of the picture when you click on it now?

You could add a Title, Exposure Details etc.

What if I have more than one pic to display? I’m glad you asked. You could display them in a row & expect your readers to click a thumbnail, open the shot, close the shot & click the next thumbnail. BUT, Lightbox has another neat feature. You can link the shots in a set together and just open one & then go from one to another without having to close them.

We do need to add another little piece of code to do this but it’s just as easy as the first time.

What we’re going to add is a title for the collection, that way, Lightbox will know which photos are grouped together. In our case we’ll call the collection “falcons”.

What we’re going to add is - rel=”Lightbox[falcons]“ - i.e we’re adding the group name in square brackets with the Lightbox code.

Note when the photos open it now says “1 of 2” under the title & if you scroll your mouse over the left or right side of the photo you should see the Next or Previous button depending on where you are in the set. The photos don’t have to be next to each other in your post, just remember to add the group to all the shots in the post which are in that set.

So that’s how to add your shots using the Lightbox - Hey, you’re a coder!

You’ll need to check that the Lightbox Plugin is turned on, otherwise your pics won’t load properly. To do that, in your Admin Panel go to Plugins (top right), look down the list to find the Lightbox Plugin & make sure it’s activated, if it isn’t just click the ‘Activate‘ link next to it which will turn it on.

PS: in order to have both shots together in the center, I removed the - class=”size-full wp-image-28 aligncenter” - part of the code, otherwise they appear on separate lines.

PPS: You need to make sure your theme can cope with Lightbox, one or two have problems with the Title graphic for the blog appearing over the of the Lightbox photo, if this is a problem, you’ll have to try a different theme.

This entry was posted on Thursday, August 7th, 2008 at 15:15 and is filed under Tutorials.You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.

Just another weblog

Adding Photos to a Post with Lightbox