[Note: I updated the list of lightbox plugins below to include more current plugins on 29 May 2015. I only recommend plugins that have a high download number and ongoing support and maintenance. If you run across a plugin you really like, please comment. Thanks. ~Angela]
WordPress supports image galleries without having to use any plugins. Below are instructions on how to insert a native WordPress image gallery on a post or page. The native WordPress image gallery displays as a grid of image thumbnails. If you install a lightbox plugin, clicking one of the thumbnails in the grid will display the large version of the image on top of the content rather than taking the user away from the page.
- A lightbox can also be used with a single image. See: https://askwpgirl.com/single-image-lightbox/.
- Other WordPress photo gallery plugins come with a lightbox, so you don’t have to choose one. For a comparison of image gallery plugins, see: https://askwpgirl.com/wordpress-photo-gallery-plugins/
1 – Choose a Lightbox Plugin
There are several lightbox plugins which work with WordPress Gallery. A lightbox allows a visitor to your site to click a small version of an image on your site and display the larger version on top of the content with the content displayed darker in the background.
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:
- Easy Fancybox: https://wordpress.org/plugins/easy-fancybox/ | View Demo (scroll down to see the Images Demo).
- Responsive Lightbox by dfactory: https://wordpress.org/plugins/responsive-lightbox/ – mobile friendly lightbox!
- WP Lightbox 2: https://wordpress.org/plugins/wp-lightbox-2/ – also a responsive lightbox!
- 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/
- Jetpack: Jetpack was created the makers of WordPress (Automattic) and not only does it provide an awesome lightbox called “carousel,” it also adds a lot more gallery tiling options (like circles and mosaic patterns). Documentation and demo: http://jetpack.me/support/carousel/
- Lightbox Plus ColorBox: A really robust lightbox plugin – You must check Use For WP Gallery box under Other Lightbox Plus Settings. http://wordpress.org/extend/plugins/lightbox-plus/ Also works with NextGEN Gallery – is being overhauled at the moment so test with your set up.
- Simple Lightbox: Lots of options in the Media Settings of WordPress – http://wordpress.org/extend/plugins/simple-lightbox/
2 – Install Your Choice Lightbox Plugin
- Login to your WordPress dashboard and go to Plugins > Add New.
- 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.)
- Click Install Now and click the OK button when asked if you want to install the plugin.
- Click the Activate Plugin link.
3 – 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.
4 – Upload Images and Insert Gallery
- 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.
- Upload multiple images by shift-clicking to select a group of images.
- After the images have been uploaded, click the Create Gallery link on the left side of the Insert Media window.
- In the Create Gallery window, be sure you have the images selected you want to include in the gallery, and then click the blue Create a new gallery button.
- In the Edit Gallery window, choose Link to Media File (this will enable the lightbox to open the image), choose the number of columns to display, and the type of gallery. If you have enabled the Jetpack Tiled Galleries plugin, you will have more options in the type drop down list.
- Click Insert Gallery. In the Text editor for the post, you will see the shortcode that WordPress inserted with the image IDs and other parameters.
- Update or Publish your post and view the results. If you have any trouble with this, try using a different lightbox plugin. Note: you can only have ONE lightbox plugin enabled.
Below is a gallery of images from my recent trip to Peru using the Jetpack Tiled Gallery and the Magnifipop responsive lightbox plugin that comes with the theme that I use (WP Jump Start).