Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Gallery in WordPress with a Lightbox Effect

How to add a gallery in WordPress with a lightbox effect is one of the hottest question that we have been getting lately through our contact form, so we have decided to cover it. Many beginners are not aware that WordPress has a built-in gallery feature that can be used on any post or page. In this article, we will show you how can add the native gallery in a WordPress post or page. We will also show you how to install a plugin that will allow your users to open the full-size images in a lightbox which will keep them from going to a different page.

Adding a WordPress Gallery

First open an existing post/page, or create a new post. Next thing you need to do is upload a bunch of images to this post. Click the Upload Media icon to upload your new Gallery images.

Upload an Image

Once you have uploaded all the images, make sure you come to the Gallery Tab. Scroll down until you see the Gallery Settings. Choose your ordering scheme, and decide how many columns you want your gallery to have. on this page. A good rule of thumb is to use 3 on 3 column layouts, 4 on 2 column layouts, and 6 on full width layouts, but it can vary depending on the theme you have. Once you have selected the settings, Click Insert gallery.

Gallery Tab

Now, you will see a new icon that is added to the body of your post which represents the gallery.

Gallery Icon

Just click Update or Publish on your post/page, and the gallery will be added to the live site.

Adding Lightbox to the Native WordPress Gallery

If you try to click any of the thumbnails in your new gallery, you’ll notice they just open up a separate attachment page in a new window which is not very user-friendly. But, you also want to give the users to view the full-size images which is why we will install a simple plugin called jQuery Lightbox For Native Galleries.

First, Install and Activate the Plugin.

Next, you need to go to Settings » jQuery Lightbox. Select the theme you want to use for your lightbox window.

jQuery Lightbox Settings

Now come to your post, and test your gallery. It should be working fine.

Congratulations, you have now added a gallery with a lightbox to your WordPress post or page. Final preview would look something like this:

WordPress Gallery Preview

FAQ from the Comments

Binoy in the comments asked that if there was a way to select which image shows up in the gallery because by default all images attached to the post are added. Leo was kind enough to share the plugin Multiple Galleries which adds checkboxes next to images you have uploaded to a gallery in a post. Selecting checkboxes will include those images in that particular gallery.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

38 CommentsLeave a Reply

  1. I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.

  2. Hello,

    This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.

    Thanks,

    Mike

  3. Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ‘ImageBucket’.

  4. Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?

  5. I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?

    Thanks
    Alex

    • Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.

      Admin

  6. This is a really cool solution, thank you! So much quicker and neater than what I was doing…
     
    Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ‘feed’ before you open up the individual post.
     
    Thank you in anticipation!

    •  @JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.

      •  @wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.

  7. @ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.

    This is a game of trial and error when you encounter problems like these.

  8. I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.

    Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.

    Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.

  9. Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!

  10. @TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.

  11. Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?

  12. Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.

    Thanks!

  13. I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!

  14. I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.

  15. Thanks for the information.

    It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.

    • No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.