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 – Choose a Lightbox Plugin

There are several lightbox plugins which work with WordPress 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:

2 – 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.

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 – create galleryUpload 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 been uploaded, click the Create Gallery link on the left side of the Insert Media window.
  4. 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.create new gallery
  5. 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.
    gallery-image2
  6. 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.
  7. 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 Carousel Lightbox.

Leave a Reply

  1. I’ve started using FooBox. Its a premium plugin ($27 per site, or unlimited for $97). Responsive, includes social media sharing, and hooks into Next Gen very easily.

  2. Such a great resource! Is there a plugin that can activate a lightbox-style (or thickbox-style) effect for individual images? Or are they all gallery related only?

    • Hi Simon — Yes!!! The easiest plugin is: http://wordpress.org/plugins/simple-lightbox/ After activating the plugin, you can find settings under the Appearance area of the WordPress Dashboard. Basically, install it activate it, and then when you insert the image on the page, insert the Thumbnail or Medium or whatever smaller size you want to, then link the image to the “Media File.” This will cause the larger image to display in the lightbox when you click the smaller image on the page or post. Super simple.

  3. Hi,

    I’m an architect and wanting to organize images with this outline: building type>project>slideshow. There would be a grid of thumbnails of each building type (commercial, residential, etc.) that would be a link to a page with a grid of project thumbnails each linked to a project slideshow. Is this possible using a light box and NextGen Gallery?

    Thanks,

    Leo

    • Hi Leo,

      Yes, you could set up NextGEN Gallery to manage multiple image galleries. Depending on how you needed it to work, there are different ways of setting it up.

      When you speak of “project slideshow” do you mean “lightbox display?” If so, yes this would all be fine.

      What I would do is create a page that had your building types displayed in a table or with floats to display in a grid. Then link each of those images to the page dedicated to that project type. On that page, you can insert the NextGEN Gallery for that building type, and it will insert as a grid of thumbnails that could be opened and navigated in the lightbox.

      I hope that helps!

      Angela

  4. I like to add light box for the shared links in comment.
    How can this possible?
    I lot of search plugin for this but i not found.
    So i download a plugin for this but i ‘can’t find that’s the one line in the source which makes it a hyperlink links.
    But i must be add two word class=”lightveiw”
    Can you help me?

    • It looks like you uploaded images that were too small. You should upload your images at the full size, then the plugin/gallery will automatically generate the thumbnails for you and then display the large images when the lightbox is activated.

  5. Hi
    I got fancybox for wordpress plugin but the image in galerie doesn’t appear with lightbox effect even if choose Link to Media File. I have to put the code : link=”file in the shortcode to enable it. Why ??
    Thank you

    • The shortcode should automatically be generated by the Gallery plugin. If you are creating a Gallery you want to be sure to click the Create Gallery link and that will automatically link the file to the media file via the lightbox.

  6. Is there an alternative to Jetpack’s tiled gallery plugin. Jetpack was really slowing my site down but I like the ability to do the tiled images

    • Hi May,

      I have not experienced Jetpack slowing down a site unless you have activated certain things like the Stats. If you turn off the stats and any other features of Jetpack you are not using, I don’t think it should cause much drain on your site.

      A couple things to keep in mind:

      1 – Bad hosting can really slow down your site. I have experienced a lot of slowness of sites hosted on Yahoo, GoDaddy, Network Solutions, and Blue Host/Host Monster shared hosting. For reliable shared hosting, I have been mostly referring people to Host Gator, and their site speeds have picked up a lot.

      2 – For site slowness, consider running a database utility like Optimize Database after Deleting Revisions. It will get rid of all your old post revisions and optimize your database tables and greatly improve the performance for your site:
      http://wordpress.org/extend/plugins/rvg-optimize-database/

      3 – Look at what other plugins you are running that could be causing problems.

      4 – Run a caching plugin. I really like Hyper Cache for a pretty simple, non-interfering, easy-to-setup caching solution. It will speed up your site exponentially:

      http://wordpress.org/extend/plugins/hyper-cache/

      5 – Someone forked the Jetpack lightbox (Carousel) plugin to a separate plugin from Jetpack if you want to use that:

      http://wordpress.org/extend/plugins/carousel-without-jetpack/

      6 – I’ve found really nice gallery plugins at:
      http://codecanyon.net

      Good luck!

  7. Hi, I love the Jetpack Tiled Gallery and Carousel Lightbox. My problem is, I do not have this window, which you describe in number 4. I only have have a very simple Upload-Box, but nothing asking me “Create a Gallery”. Where do I get this more advanced window from?
    Thank you very much!

    • Hi, You will need to have your site updated to WordPress 3.5 to see the new and improved Media Upload interface. Also, you’ll want to do this on a page or post not via the Media Library.

  8. Hi there
    I need a lightbox and a header slider. Have tried a few but haven’t found a combination that work together. Can you recommend any that don’t conflict.

    • Hi Marylou,

      There are so many good options. I did list a bunch of lightbox options in this post you can try. Not knowing specifically what you want to accomplish or the theme you are using or how you plan to implement this, it’s hard for me to recommend something specific.

      Angela

      • Hi Angela
        Thanks for your response. I’m using Wordpres twenty twelve and, by trial and error, Ive found that jQuery Lightbox For Native Galleries and Header Image Slider work together nicely.

  9. my account on WordPress doesn’t have plugin feature. do lightbox has a html code to insert for my blog?

    • Hi Phoebe, WordPress.com does not support the addition of plugins. This makes it a very limited platform to use. However, if you sign up for your own hosting account at Host Gator, Blue Host, or any other WordPress supportive hosts, you can use their “one-click” installer to install a standalone version of WordPress. The standalone version of WordPress lets you install any plugins or themes you’d like.

      If you stay with wordpress.com, you can try to use their forums to find a solution for a lightbox effect: http://en.forums.wordpress.com

  10. i have installed plugin and add gallery with pictures but its not showing pictures on my page .  what could be the problem . 

    • That’s very strange. Can you reply with a link to the page? Did you click the Insert Gallery button after you uploaded/added the images?

  11. Thanks WPgirl for the reco—what I have been looking for is a pluggin that allows a gallery set to be used, but each image can have it’s own url—to either a specific page in the site or url outside the site… I’ve been using a pluggin I found here: http://geekeemedia.com/wordpress/add-a-custom-url-to-your-wordpress-gallery-images/#comment-534742126  but can’t quite get it to work right (it doesn’t override the default setting of linking to image in lightbox or attachement page, even thought it let’s me put in a unique url associated with the image).

    Would love you to share if you have every found anything to use for this particular issues….

    Thanks so much for your amazing insight and help! Susan

    • I teach a class on how to use NextGen Gallery plugin. It’s a very robust gallery plugin, and you can publish each image to it’s own post page and have the gallery thumbnail image set to link to the image url. Please email me at http://moongoosedesigns.com, and I’ll try to dig up the detail.

  12. Hi Angela,

    Found your recommendation to use the Lightbox Gallery (in your response to Marianne) worked well for me. I was having similar issues of trying to find a Lightbox plug-in to work with my existing theme, and guessed it was conflicting with the theme’s own way of displaying photo galleries.

    Cheers!

    • Yes, lightboxes can conflict with a theme if the theme already uses a lightbox. If possible, use the theme’s built-in lightbox. Check the theme’s documentation on how to do this with the WordPress image galleries. Many themes will have instructions on how to use their lightbox. You can’t have more than one lightbox activated on a site at a time, and you do need to read the lightbox plugin documentation carefully. Lightbox Plus is another good lightbox plugin.

  13. I can’t seem to get it to work correctly. I have to deactivate Cleaner Gallery just to get the thumbnails to show up. But once i do that and click on the images, they just open up into a new page, no lightbox. I have tried Fancy Box and Floatbox Plus so far with the same effect on both. I don’t have any other image gallery plugins installed. Very confused as to how to get this to work correctly.

    • Hi Marianne,

      What theme are you using? Some themes already have a lightbox plugin that comes with them, and they can interfere with each other. I’ve also found that in these cases, the Cleaner Gallery plugin doesn’t work properly either.

      Try this plugin and deactivate any other lightbox plugins you might have installed:

      http://wordpress.org/extend/plugins/lightbox-gallery/

      Then use the [gallery] shortcode on its own on the page. Let me know if that works.

      Angela