Create an Image Gallery in WordPress Using a Lightbox Plugin

WordPress supports image galleries without having to use any plugins. However, using a couple simple plugins will take your WordPress gallery from nice to wow!

1 – Install Cleaner Gallery Plugin

The Cleaner Gallery plugin creates valid HTML code (which the default WordPress gallery does not) and ingrates with many lightbox-type plugins. (Lightbox displays a large version of an image on top of the web page and fades out the rest of the web page. For an example of lightbox effect, see the Demo on the Slimbox 2 site: http://www.digitalia.be/software/slimbox2/.) (Note: the Cleaner Gallery plugin may not play well with some themes, so deactivate this plugin and skip on down to #2 if you find that the gallery doesn’t work properly after you’ve installed it.)

To install the plugin:

1. Login to your WordPress dashboard and go to Plugins > Add New.
2. In the search field, type Cleaner Gallery.
3. Click Install Now for the Cleaner Gallery plugin by Justin Tadlock and click the OK button when asked if you want to install the plugin.
4. Click the Activate Plugin link.

2 – Choose a Lightbox Plugin

There are several lightbox plugins which work with Cleaner Gallery. The important thing when selecting a lightbox plugin is to find one that has been recently updated and installed by many other people — these two things demonstrate that the plugin is going concern for the developer and likely to stay updated. Each lightbox plugin works a little differently in terms of how the image enlarges, how the navigation displays, how the caption and image title display, etc. You can check the functionality of the following plugins and then decide which one you want to use:

• Fancybox for WordPress by José Pardilla: http://wordpress.org/extend/plugins/fancybox-for-wordpress/| View Demo (scroll down to see the Images Demo).
• WP-Slimbox2 Plugin by Greg Yingling (malcalevak): http://wordpress.org/extend/plugins/wp-slimbox2/. See demo at: http://www.digitalia.be/software/slimbox2/
• Floatbox Plus by Oliver Schaal: http://wordpress.org/extend/plugins/floatbox-plus/. See demo at: http://randomous.com/floatbox/demo
• wp-jquery-lightbox by Ulf Benjaminsson: http://wordpress.org/extend/plugins/wp-jquery-lightbox/. See demo at: http://game.hgo.se/blog/motion-capture/
• Lightbox 2 by Rupert Morris: http://wordpress.org/extend/plugins/lightbox-2/
• Thickbox: You can use the thickbox script that comes with WordPress and not have to install anything. See demo at: http://jquery.com/demo/thickbox/

3 – Install Your Choice Lightbox Plugin

1. Login to your WordPress dashboard and go to Plugins > Add New.
2. In the search field, type the name of the plugin you chose from the above list in step 2. There are many plugins with similar names, so if you type the name exactly as the text in bold above, you’re more likely to find the correct plugin. Be sure to match the plugin author name as well. (If you want to use the Thickbox script that comes with WordPress, you don’t have to install a plugin.)
3. Click Install Now and click the OK button when asked if you want to install the plugin.
4. Click the Activate Plugin link.

4 – Set the Cleaner Gallery Settings

1. Under Appearance, click Cleaner Gallery.
2. In the Default Gallery Settings, choose display Thumbnail and Images should link to full image. You can set other settings as you prefer.
3. If you are using the built-in WordPress Thickbox, check the two Thickbox checkboxes under Script and Style settings. If you are using one of the other plugins listed above, choose the plugin name from the list under External Image Script.
4. Click Update Settings.

5 – Set the Lightbox Plugin Settings

Look under the Settings area for the lightbox plugin you installed in step 3 above and set whatever settings you’d like for the lightbox effect. For example, using the Lightbox 2 plugin, I like to set the option to have the images dynamically resized so they fit within the browser window.

6 – Upload Images and Insert Gallery

1. On the post or page where you’d like to display your gallery, click the Add an Image icon to the right of Upload/Insert just above the visual editor toolbar.
2. Upload multiple images by shift-clicking to select a group of images.
3. After the images have uploaded, click Save Changes.
4. The Gallery tab will automatically be selected. In the Gallery Settings area, choose link thumbnails to Image File and the number of columns you’d like, then click Insert Gallery.
5. The gallery will insert a shortcode on your page or post which will display as a camera with a photo. To see the shortcode, click the HTML tab.
6. Update or Publish your post and view the results. If you have any trouble with this, try using a different lightbox plugin or deactivating the Cleaner Gallery plugin. The results vary depending on the theme you are using. If your theme already has a lightbox effect installed, you may not need to install a lightbox plugin and can just do this step 6 in order for your gallery to display.

Below is a gallery of images from my recent trip to Peru.

In order to exclude the screenshots above from this gallery, I went into the HTML tab and modified the short code to remove these image IDs (which you can find by going the Media > Library and editing the image. The image ID displays in the browser URL. Here’s my modified shortcode: [ gallery link="file" columns="4" exclude="395,397" ] (Note: I put spaces after the brackets so you can see the code, otherwise, you’d just see the images again. You can exclude more than one image by separating the image IDs with commas.) For more information about the Gallery shortcode, see http://codex.wordpress.org/Gallery_Shortcode