One of the nice upgrades in the recent version of WordPress (released Dec 2012) was the integration of a very easy to use image gallery. This gallery provides a lot of nice features, however it does lack the very nice lightbox effects that many other galleries have. But fortunately there is an easy drop-in plugin that requires NO configuration to provide a lightbox. This tutorial covers the basic setting up and inserting of a WordPress gallery with a lightbox.
Terminology
Before we get started with the tutorial, I just want to clarify a few terms I will be using:
- Gallery – This is the displayed gallery consisting of many images.
- Thumbnail – These are the individual images in the displayed gallery.
- Lightbox pop-up – When a thumbnail is clicked a window pops up and the rest of the screen is dimmed. This is a called a “lightbox”.
Preparation: Installing a Lightbox
To get the benefits of a lightbox without having to do much additional work, we are going to use Ulf Benjaminsson’s WP jQuery Lightbox plugin.
In your dashboard go to Plugins > Add New.
Search for “wp jquery lightbox”.
Then click “Install Now” for the WP jQuery Lightbox. There will be a popup asking you to confirm that you want to install this plugin, click “OK”.
Now that plugin has been installed, the only step left is the Activate it. Just click on Activate.
And now you’re done preparing your gallery to use a beautiful lightbox! There are some options you can set up, but by default it is enabled for displaying images, which means you don’t have to do a thing!
Step 1: Uploading Images
The first step is having images. Before you upload your images make sure you have rights to use the images (don’t infringe on copyrights) and also make sure they have been saved for the web. If you are using JPEG images, save them at 60-70% quality. This will reduce their size which speeds up their loading time. You can also use a program such as Adobe Photoshop or GIMP to save the images for the web with additional compression options.
Now that you have your images ready for upload, you can either click on “Add Media” in a post/page or you can select “Media” from WordPress menu.
If you selected “Add Media” from the post/page then select “Upload Files” and either drag and drop files to upload them or click “Select Files” to use the dialog window.
If you selected Media from the WordPress Menu, then select “Add New”. You can now drag & drop files into the image uploader area or you can select “Select Files” and use the dialog to select what file(s) you want to upload.
Step 2: Create the Gallery
Now that your files have been uploaded to WordPress, navigate to the post or page that you want to insert the image gallery into. Once on the page or post, navigate to the location in your page/post that you want to insert (just like if you were inserting a single image).
To insert the gallery, click on “Add Media”. This will bring up a new window where you select “Create Gallery” and “Media Library”.
To select files to add to the gallery, simply click on the thumbnails. Once they have been selected they will display a checkmark in the corner of their thumbnail. In the lower left of the Create Gallery window there will be displayed the current number of items in the gallery and thumbnails of the items.
Once you have inserted your gallery, you will see an icon. The actual displayed gallery will only be available if you Preview your post/page or look at the live page/post on your site.
To edit the gallery, click on the icon. Once selected the icon will become highlighted and display icons for editing or deleting.
If you select the edit icon, you can edit the title and caption text for your images. Titles will only show up when the site visitor has clicked on a thumbnail in your gallery and the full size image has been displayed in a lightbox pop-up. Captions will show up both in the gallery as well as the lightbox pop-up.
After you’ve created a gallery you can also add more images to it by selecting “Add to Gallery” in the Edit Gallery window.
You can create multiple galleries in a single post or page. Simply follow step 2 each time you want to create a new gallery.
Step 4: Finished Gallery
Here is what our sample gallery looks like. I’ve used images from a previous post on eCommerce themes. Click on the image thumbnails to see the lightbox pop-up.
