Create an Image Gallery in WordPress Using a Lightbox Plugin

[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.

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:

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 – WordPress Gallery - Insert Media and 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 the Magnifipop responsive lightbox plugin that comes with the theme that I use (WP Jump Start).

Angela Bowman

Front-end WordPress developer since 2007 building highly custom websites for nonprofits and small businesses. Experienced in nonprofit administration, grant writing, and technical writing. Love high altitude hiking and backyard chickens.

View all posts by Angela Bowman

Related Posts

72 comments on “Create an Image Gallery in WordPress Using a Lightbox Plugin”

  1. Dear Angela,

    Do you know which Gallery or lightbox plugin can function like the Archdaily website?
    https://www.archdaily.com/946649/morninton-peninsula-house-turco-and-associates

    There are thumbnails below each article, and you can click on the image to see another page (unique url an share button) with the image. In this page, you can read the caption of this image.

    I tried a lot of Gallery and lightbox plugins like NextGen, Meow, FooBox…, still cannot find what I want. Even NextGen Pro cannot function like the Archdaily website. Deep Linking, Caption & Description, and Social Sharing are very important for Google search engine to find the images.

    Do you have idea which plugin could match what I need?

    Thank you and best regards.

    Reply

  3. I wanted to let you know that this is really an informative article for beginners like me! I have bookmarked this article and I’m sure these tips will be very helpful for me to create an image gallery.

    Reply

  4. Maybe you can help.

    I’m trying to find a gallery / lightbox that offers viewers the option to favorite an image. Saved by their email … later in same visit or weeks later they can view their favorites again. Preferably in a new custom gallery or at least thumbnails of their favorites.

    Also, needs to have eCommerce … similar to

    https://www.imagely.com/wordpress-gallery-plugin/pro-ecommerce-demo/#gallery/756d8632880e92a92d99f9c078847e3a/1214/cart

    Imagely does offer a proofing option, but all that does is send small thumbnails via an email. The viewer can not click on the thumbnail linking back to the original. Nor is there any option to find the liked images other than viewers having to do a search by file name

    Reply

    • Hi William, I don’t have an answer to that question, but I would appreciate if you find one to comment again and share it.

      Reply

  5. Hi All,

    Thank you for a good tutorial. Want to offer our “ARI Fancy Lightbox” plugin https://wordpress.org/plugins/ari-fancy-lightbox/ to extend list of lightbox in the article. It is mobile friendly (supports swipe navigation, gestures like zoom, tap, pinch), add lightbox to images from native WordPress and Jetpack galleries out of box (no need manual coding or specific configuration) and can be extended with social and viral features in PRO version (supports comments, social share buttons, deeplinking). I hope your readers find it is useful.

    Reply

  6. Hello!
    I have been trying to setup a thumbnail gallery so that when you click on the thumbnail the full image will show in a lightbox allowing you to scroll through all full size images.
    I have the simple lightbox plugin enabled, but I cannot open any of the thumbnails.
    I added the thumbnails to a page by doing the following:
    insert media > create WP gallery > selected all images I want to show > select link to media file > select thumbnails > then I saved and updated.
    When I view the page I see the thumbnails but when I try to click on the thumbnails they don’t open.
    Link to webpage below.
    I’ve looked all over and I can’t seem to figure out why this is.

    Thanks for your help!

    Reply

    • Hi Katie,

      It looks like you got your lightbox to work! What was the problem? Was it the lightbox plugin itself?

      Angela

      Reply

  7. Hi there,
    If I click on an image in your gallery above, no lightbox will open but the image will be displayed in full.
    Do have the ligtbox disabled? Or is it a problem of Firefox 44.0.1?
    (please excuse my grammar, as we had english grammr in school I was send to get some new chalk)

    Reply

    • Hi, Yes, actually, I was having to troubleshoot some things and turned off the Carousel lightbox. I just re-activated it, and now you can see it working! So glad you let me know!

      Reply

    • Hi Rizwan,

      I am using the WP Jump Start theme which is so awesome because it has amazing features, like built-in author box. http://wpjumpstart.com.

      I highly recommend this theme for all development needs.

      Angela

      Reply

  9. Any reccomendation for a plugin that, when launched from a link (button), will open a lightbox with several images? Thanks

    Reply

    • Hi Frank,

      I have used NextGEN Gallery for this. Install NextGEN gallery and set up a gallery. For the first image in the gallery, use your button image, then insert the default NextGEN thumbnail gallery on a page.

      Insert the following code from https://gist.github.com/askwpgirl/b0fed179ed0d6b0b7b87a63d67ca6448 into the nggallery.css file inside the wp-content > ngg_styles folder. This will stack the images in the default, simple NextGEN Gallery, so that only one image displays per gallery and opens all images in the lightbox.

      IMPORTANT NOTE: You must turn Piclens Off in the General Options and Slideshow Off in the Gallery Options.

      Let me know if that might work for you or if you need help.

      Angela

      Reply

      • Hi Angela, thanks for the quick response.

        One quick question: Does this method allows the link that launches the gallery to be just a link with no image? The button in question is just a link styled via CSS, not an image. That’s what I am trying to achieve.

        Thanks!

        Reply

        • Hi Frank, This links the first image in the gallery to the lightbox. I’ll have to put on my thinking cap about how to link a single line of text to a gallery. What’s your deadline on this?

          Reply

          • Hi Angela, I’m not in a rush for this. If no other solution appears, I can make an image button and launch the lightbox gallery from there. I was simply wandering if there was a more “elegant” solution to this.

  11. I tried using this plugin on one of my customers sites and I could not get it to work properly. I believe the theme is Thesis 1.8.2. Not sure why it won’t work properly. I may have to delete some plugins to see if that is the problem.

    I am working with an ecommerce customer and I wonder I can get an extension to do this? I have been get my extensions from https://xtensiongalaxy.com because I can try before I buy.

    Reply

    • I have never used Xtension Galaxy. I only use a set of plugins and try to avoid getting carried away with them, because the ones that don’t work end up not being supported and cause potential security issues on the site. Good luck!

      Reply

  12. To make a wordpress image gallery is common for a site . This gallery makes the site attractive and bring on variety .
    The main fact is that this gallery impacts on the mind of visitor .
    To make image gallery on the site , there are many plugins in the market but one has to choose best one . In this case the plugin shared here is very much effective and tonic correctly .
    I convey thanks author for sharing such nice post in details for this plugin. Any way i would also like to share here https://www.gsamdani.com/ another source for some of others best plugins for various purpose .

    Reply

  15. Hello,
    I know this page is about plugins but is there an easy way to put lightbox or something similar in my wordpress page without plugins?
    Regards
    ijared

    Reply

    • Thanks, James! I will definitely check it out. I teach a WordPress Gallery class in which I cover about give different popular gallery plugins. Always eager to hear about new ones.

      Reply

  18. Great tut. I don’t think WP uses Tile anymore though. Right? At least I didn’t see it. Would love to get that tile effect for clients that use vertical and horizontals together.

    Reply

    • Hi Stef,

      Thanks for writing. Yes, actually WordPress does use this. However, you need to install the Jetpack plugin (by the makers of WordPress) and then Activate Tiled Galleries under Jetpack > Settings. You might also want to activate the Carousel to show the images in a lightbox effect when you click them.

      Angela

      Reply

  19. I’m searching for a non-profit site a plugin which allows to upload images into custom folders beacuse I’ve to import a lot of images from an older Joomla website.

    Do you have any suggestions?

    Thank you,
    Antonio

    Reply

    • Hi Antonio,

      That is a very good question. There is a great plugin I used when I converted a site from another CMS to WordPress. It’s https://wordpress.org/plugins/image-teleporter/.

      All you have to do is get your old HTML content into the new WordPress pages. Then run the Teleporter, and it will automatically find and upload all the images from the old site to your WordPress Media Library and rewrite the URLs. It’s amazing. Then, you can run the Auto Post Thumbnail Pro http://codecanyon.net/item/auto-post-thumbnail-pro/4322624 to get it to assign the first image of the post as the featured image (if desired).

      Let me know how it goes!

      Reply

  22. 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.

    Reply

  23. 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?

    Reply

    • 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.

      Reply

  26. 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

    Reply

    • 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

      Reply

  27. 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?

    Reply

    • 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.

      Reply

  29. 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

    Reply

    • 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.

      Reply

  30. 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

    Reply

    • 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!

      Reply

  31. 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!

    Reply

    • 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.

      Reply

  32. 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.

    Reply

    • 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

      Reply

      • 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.

        Reply

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

    Reply

    • 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

      Reply

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

    Reply

    • 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?

      Reply

  35. 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

    Reply

    • 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.

      Reply

  36. 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!

    Reply

    • 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.

      Reply

  37. 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.

    Reply

    • 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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *