Home About Contact Podcasts Writer River WordPress Consulting

WordPress Image Galleries — Give Your Photo Galleries a Lightbox/Slideshowesque Display

July 10th, 2008 | Posted in Technical Writing, WordPress |

A WordPress image gallery allows you to create a sharp-looking presentation for your photos or images. With just a couple of plugins and tweaks and some basic understanding of the WordPress gallery tag, you can make a Lightbox/Slideshowesque display of your gallery images without any custom coding.

Here’s an example of a WordPress gallery that goes a step beyond the default. Click each of the images, and then click the arrow buttons on the image to move to the next one. Instructions for creating such a gallery are below.

To create a WordPress image gallery like the one above:

  1. Download and install the PhotoJAR plugin and the Lightbox plugin. Unzip and upload to your plugins folder, and then activate as usual.
  2. After activating the plugins, click the Settings tab (far right), and then click PhotoJAR. In the Link Images To drop-down, select Lightbox/Slimbox. In the Gallery Image Size filter, select Thumbnail. Then click Update Options at the bottom.
  3. Click the Lightbox2 tab, choose the lightbox theme color you want, and then click Save Changes.
  4. Create a new post and upload your collection of images by clicking the Add an Image button. When you upload an image, it is associated with the post. With each image, add text in the Title and Caption fields. The caption will appear below the gallery thumbnail (so make it short), whereas the Title will appear below the image when viewed alone (so make it longer).
  5. After uploading the images, close the dialog box. Do NOT click the Insert into Post button. Your images are already associated with the post. When you add a gallery tag, they will automatically be pulled into the post without any html code at all.
  6. In the HTML view, add the following code to your post: [gallery size=”125×125xcrop”]. 125 x 125 is the thumbnail size, which you can change to best fit your blog’s width. By default, three images appear in a row.
  7. Modify the styles for the captions and image sequence numbers by modifying your Lightbox theme’s style sheet at /wp-content/plugins/lightbox-2/Themes/Black/. In the following style declarations, caption controls the Title; numberDisplay controls the “Image 1 of 7…” text. Change the values as desired.
  8. #stimuli_imageData #stimuli_caption{ font-weight: bold; background-color: black; font-size: 12px; color: #c0c0c0;}
    #stimuli_imageData #stimuli_numberDisplay{ background-color: #000000; display: block; clear: left; padding-bottom: .5em;}

  9. Publish your post.

Rearranging the Gallery Image Order

With WordPress 2.6, you can arrange the gallery image order by dragging the images on the Gallery tab into the order you want.

Additional Reading

Note About Image IDs

If you don’t want to insert an entire gallery, you can insert individual images (which are associated with any post), but you have to know the image IDs. To view the image IDs, go to the Manage tab and click the Media Library subtab. Mouse over the image title and look at the Post ID that appears in your browser’s footer. You can then insert the single image into your post by using the following code: [image=23]. Also, replace 23 with your real image ID.

You can also click the Insert into Post button that appears below the image when viewing the Gallery tab.

Note About the Description Field

You’ll notice I didn’t mention the Description field. The Description field doesn’t apply to images with the Lightbox effect. If you weren’t using the Lightbox effect for the gallery, each individual image — when clicked — would appear on its own page, with the Description text below it. The Lightbox plugin makes the image appear in a layer on the current page.

Photo Credit Goes to Jane

Special thanks to Jane for the photos (yes, they’re our kids). The post where she wrote about this event is here: Sugar and Sugar, and Everything Nice.

RSS Subscribe


Related Posts

Tags: , , , , , , , ,


Comments

You can leave a response, or trackback from your own site.

31 Responses to “WordPress Image Galleries — Give Your Photo Galleries a Lightbox/Slideshowesque Display”

  1. güzel paylaþým

  2. That’s nice, Tom, but people who are lazy like me might prefer to use PictoBrowser with their Flickr account. You can see an example here: http://foodperson.com/2008/07/04/independent-community/. You can simply click on “PictoBrowser” is somebody’s else’s display, and it takes you through the simple steps to set up your own.

    Janets last blog post..Roundup: Prices, pantries, programs

  3. WordPress Image Galleries — Give Your Photo Galleries a Lightbox/Slideshowesque Display

  4. [...] love this plugin and wrote a post about it here. But I have a question. How can I use the gallery tag and also control the order of the [...]

  5. That plugin rox! Thanks!

    Pittsburgh Newss last blog post..Tin Can Canoe

  6. What cute images to use for your tutorial. Aren’t kids great!

  7. I knew about lightbox plugin which I used on my wordpress blog but never heard of photojar one.. It seems to be worth to give a try….

    A Software A Days last blog post..Take back the web with firefox

  8. Thank you! I’m looking for something to organize my wedding photos a bit better, this may be what I need :)
    AllenAs last blog post..Linda and Chris’ Wedding

  9. Does it work with WP 2.6.? I already have lightbox.

    Rs last blog post..Soziale Netzwerke: Angriffsziele von Cyberkriminellen

  10. kugelblitz Says:

    looks like the lightbox does not work in this example

  11. Tom, It looks like your lightbox.js file is broken. Line 348 should be:

    imageArray.push(new Array(imageLink.getAttribute(’href’), stimuli_image_title));

    R, I have PhotoJAR running on WP 2.6.

  12. Many thanks! Now I shall try:)

  13. JARInteractive, thanks for the detailed info about the code fix with the lightbox.js file. Pretty cool that you could see that detailed level in the code without even having the file.

    I was playing around with that file last week and broke it. I have the NextGen Gallery implemented with a certain site where I needed long captions below the pictures. Whenever long captions appear in either the lightbox or thickbox effect (the pop-out picture), they don’t display well. I wanted to somehow disable the image from popping out when it was clicked, but alas, I could never figure out how to do that, so I hard-coded the images into each page. I must have been experimenting with the lightbox.js file on my own site too and broke that code. Again, thanks.

    Tom

  14. Thanks very much!

    I will try learning it with the tutorial.

    Jae Hyun Lees last blog post..Several Pictures of Yonsei Univ.

  15. Great, this is just what I was looking for. Thanks a lot.

  16. thank you as well. this is exactly what I was looking for. I have many thing to organize

  17. Very cute kids and very informative and detailed instructions. Thank you for the winning combination!

    Arts last blog post..Encyclopedic Knowledge: showing Bits/Programs

  18. Excellent shots you got here.

  19. @ JARinteractive,
    that line ” imageArray.push(new Array(imageLink.getAttribute(’href’), stimuli_image_title)); ”
    looks exactly like that but it still does not work with my Wordpress 2.6 and Lightbox 2.7.7

  20. I followed your instructions, but the thumbnails disappeared except for a small icon which, when clicked, produces the lightbox effect. The thumbs on my media gallery in WordPress 2.6 give the message:

    Error Resizing Image: error_loading_image

    I dumped everything and started again, but got the same effect.

    Any suggestions?

    Thanks,

    Craig

  21. Excellent shots you too got here.

    Jannys last blog post..Загадка

  22. Thanks for putting this together.

    On step 6 you say:

    “Add the following code to your post: , but replace the angle brackets with square ones, [ ]”

    There is no code following. What am I missing?

  23. Craig,

    I had same problem. I noticed that the thumbs where sources at wp-content/plugins/photojar-base/cache/ which did not exist, so I created folder (cache) and chmod to 777.

    Worked fine after that.

  24. @Joe, sorry about that omission. I just fixed it. For some reason, I have the hardest time getting code to look right in my posts.

    @Craig, does a plain gallery tag work for you? Maybe you have another plugin that’s interfering? I’d say, upgrade to the latest version of WordPress, deactivate all other plugins, and then just activate the Lightbox 2 plugin. See if that works. (It applies the Lightbox effect to every picture on your entire site.) If that works, activate Photojar. Then continue activating the other plugins one by one, each time testing the Lightbox effect to make sure it’s not broken.

    If that doesn’t work, google site:wordpress.org/support lightbox + your error. In other words, search the forums for your answer. Also try the Lightbox plugin author’s page.

    If that still doesn’t work, try posting questions on the forum and contacting the Lightbox plugin author. I think (although I may be wrong) that there are other Lightbox type plugins, so try those.

    Another possibility may be your browser. Try viewing the effect in different browsers. I’m not sure what technology the Lightbox effect uses, but perhaps it’s a javascript issue and your browser blocks them. Upgrade to the latest version of IE and Firefox. If you’re already using the latest, refresh the settings, clear the cookies/cache, and do a Help > Detect and Repair.

    If all of that doesn’t work, please let me know. I’m out of suggestions, but I’d be surprised of one of those solutions didn’t work for you.

  25. Thanks, Tom! - problem solved

  26. Craig, do you know what fixed the problem (for the benefit of others who may be experiencing the same)?

  27. Deactivating and reactivating the plugins worked.

  28. Wow! Very cool, I love lightbox applications and your kids are so so cute, thanks for the tip - keep em coming!
    Danielle.

    Cute Kidss last blog post..Nature Baby Girl Names

  29. thank you so much. I could create a shop on blog with this tutorial :)

  30. After resolving the missing directory issue, by chmoding the cache folder, I’m not getting any thumbnail created. Is anyone having the same problem?

  31. Catchable fatal error: Object of class WP_Error could not be converted to string in F:\Web\Sites\drakontas.org\bhangra\! www\wp-content\plugins\photojar-base\pj-image-resize.php on line 82

    what do i do?

Leave a Reply