--- title: "How to Add an Image Lightbox in WordPress (Popup Images on Click)" url: https://nexterwp.com/blog/wordpress-image-lightbox/ date: 2026-07-22 modified: 2026-07-22 author: "Aditya Sharma" description: "Key TakeawaysAn image lightbox opens a picture in a full-screen overlay when a visitor clicks it, so they see the detail without ever leaving your page.WordPress has had a built-in..." image: https://nexterwp.com/wp-content/uploads/2026/07/m3em68-1024x538.jpg word_count: 1524 --- # How to Add an Image Lightbox in WordPress (Popup Images on Click) #### Key Takeaways - An image lightbox opens a picture in a full-screen overlay when a visitor clicks it, so they see the detail without ever leaving your page.- WordPress has had a built-in lightbox since version 6.4. Select an Image block, open the settings, and turn on "Expand on click." No plugin required.- The core lightbox only works on single core Image blocks. It does not give you a gallery lightbox with next and previous arrows, captions inside the overlay, or styling controls.- For real galleries and more control, Nexter Blocks adds an Advanced Image block with a Fancy Box option, plus an Image Gallery block with a Fancybox across grid, masonry, metro, and carousel layouts.- Whichever route you pick, compress the full-size images, make the overlay closable with the Escape key, and skip the lightbox on small decorative images.   I write for a WordPress blocks team, and "how do I make this image open bigger when someone clicks it" is one of the most common questions we get, especially from people who just moved off a page builder and expected the feature to be sitting right there. Here is the situation it usually comes from. You drop a nice screenshot or a product photo into a post, scale it down so it fits the column, and then realize nobody can actually read the text or see the detail. The reader has to squint, or right-click and open the image in a new tab, which pulls them off your page entirely. An image lightbox solves that. Click the thumbnail, the full image floats up over a dimmed background, click away or press Escape, and you are right back where you were. The good news for 2026 is that you probably do not need a plugin for the basic version. WordPress ships a lightbox inside the core Image block. The catch is that the built-in one is deliberately simple, so the moment you want a real gallery, captions, or navigation arrows, you reach for a block plugin. This guide covers both, starting with the free built-in route. Table of Contents ## What is an image lightbox in WordPress? A lightbox is an overlay that shows a larger version of an image (or a whole gallery) on top of the current page, dimming everything behind it. The reader stays on the same URL the entire time. You have almost certainly used one: click a photo in an online store or a portfolio, it expands over a darkened screen, and an "x" closes it. Lightboxes are worth adding to photography portfolios, product shots, tutorial screenshots, infographics, floor plans, and team photos, basically any image where the detail matters more than the thumbnail can show. They keep people on the page and give small images room to breathe. One quick distinction, because the words get mixed up. A lightbox is triggered by the visitor's own click and is welcome. A marketing popup interrupts the visitor with an offer or a signup form they did not ask for. They use similar overlay mechanics but solve opposite jobs, so do not confuse the two when you are planning a page. ***Also Read:** [How to create a popup in WordPress](https://nexterwp.com/blog/how-to-create-a-popup-in-wordpress/) if it is an opt-in or announcement popup you actually want, not an image lightbox.* ## Method 1: Add a lightbox with the WordPress core Image block (no plugin) Since WordPress 6.4, the core Image block has a built-in lightbox, so for single images you do not need to install anything. Here is the whole process. - Edit the post or page and add an Image block (or click an image you already placed).- Open the block settings in the sidebar and find the **"Expand on click"** toggle. Turn it on.- Update the page. On the front end, clicking that image now overlays it across the whole screen with a close button in the corner. ![WordPress core Image block lightbox Expand on click setting in the developer documentation](https://nexterwp.com/wp-content/uploads/2026/07/vMPdxeZF1Ma8t67XE4cPVJnBH0gewkvZ8A1N2m944QtEVNLhu0cELy13wbLuvjow6qOjJAZ7RzXa-0siXFFRGw-scaled.png)The WordPress developer docs describe the core Image block lightbox, added in WordPress 6.4, and how to control it. Source: developer.wordpress.org. Want every image on the site to open in a lightbox without toggling each one by hand? You can switch it on globally through your theme's `theme.json` file by setting `settings.blocks.core/image.lightbox.enabled` to `true`. If you want the feature on everywhere but do not want editors flipping it off per image, set `allowEditing` to `false` so the toggle disappears from the sidebar while the lightbox stays active. Now the honest limits, because this is where most people hit a wall. The core lightbox only works on the core Image block. It shows one image at a time with a close button, so there are no next and previous arrows to move through a set. It does not display your captions inside the overlay by default, and there is very little you can style. It is genuinely useful for a screenshot here and a product photo there, and it is free, but it is not a gallery experience. That is the difference that sends people to method two. ## Method 2: Add a lightbox with Nexter Blocks (single images and full galleries) When you need more than a single expanding image, a block plugin fills the gap. Nexter Blocks is a free Gutenberg block plugin on WordPress.org (10,000+ active installs) built by our team at POSIMYTH, and it handles lightboxes two ways depending on whether you are showing one image or many. ### For single images: the Advanced Image block The Advanced Image block is a richer version of the standard image. Alongside options like image masks, it can "Open the Image in a Fancy Box for Enhanced Viewing Experience," which is the lightbox. Add the Advanced Image block, drop in your picture, turn on the Fancy Box option, and you have a click-to-expand image with more presentation control than the core toggle gives you. ![Nexter Blocks Advanced Image block with the Open the Image in a Fancy Box lightbox option](https://nexterwp.com/wp-content/uploads/2026/07/4F8JMpSzT5f4RLsIpOfTTCejoRNRLqSvu1Oe86NAjEtPqmVV9GhZNfH-Hn_M52cVR1NUp994aQ96LSe7szA2g-scaled.png)The Nexter Blocks Advanced Image block lists "Open the Image in a Fancy Box" as a built-in option. Source: nexterwp.com. ### For galleries: the Image Gallery block This is the part the core editor cannot match. The Nexter Blocks Image Gallery block is built to "Enhance Image Viewing With a Smooth Fancybox Feature," so every thumbnail opens into a proper lightbox you can click through. You get grid, masonry, metro, and carousel layouts, and you can add category filters so visitors can sort a large set of images by type. That combination, a real multi-layout gallery plus a lightbox, is part of Nexter Blocks Pro rather than the free tier, which is worth knowing before you plan a big portfolio page. ![Nexter Blocks Image Gallery block with Fancybox lightbox across grid masonry metro and carousel layouts](https://nexterwp.com/wp-content/uploads/2026/07/3wVaYu36Z9pJoJqyjHe3AG8iF4kWECazIMupTGAuR0XF-761KlyfZR9Oef4KlYx6ESjJ5APsFlo9pwRzsbCSKw-scaled.png)The Nexter Blocks Image Gallery block pairs a Fancybox lightbox with grid, masonry, metro, and carousel layouts. Source: nexterwp.com. If you already know your images belong in a structured gallery rather than scattered through a post, it helps to build the gallery first and let the lightbox come with it. ***Also Read:** [How to create a WordPress image gallery using Gutenberg](https://nexterwp.com/blog/create-a-wordpress-image-gallery-using-gutenberg/) for the full gallery setup that a lightbox sits on top of.* ## Image lightbox best practices A lightbox loads the full-size version of an image, so a few habits keep it from hurting your page. - **Compress the full-size files.** The overlay serves the large image, not the thumbnail, so a heavy original will feel slow. Good [image SEO and optimization](https://nexterwp.com/blog/image-seo-wordpress/) habits, like sizing and compressing before upload, matter more here than anywhere.- **Keep it closable by keyboard.** Visitors should be able to press Escape to close the overlay, not just hunt for the button. The core lightbox includes a close button by default.- **Check it on mobile.** Make sure the expanded image fits the screen and the close control is easy to reach with a thumb.- **Do not lightbox everything.** Small icons, logos, and decorative images do not need to expand. Reserve the lightbox for images with detail worth enlarging.- **Write real alt text.** The alt text still describes the image in the overlay, so keep it descriptive rather than stuffed with keywords. Lightboxes also pair naturally with other click-to-reveal image patterns. If you are comparing two versions of a shot, a [before and after image slider](https://nexterwp.com/blog/best-before-after-plugins-for-wordpress/) can do the job better, and for a rotating set of promo images a [carousel slider](https://nexterwp.com/blog/best-carousel-slider-plugins-for-wordpress/) may fit the layout more cleanly than a grid. ## Which method should you use? It comes down to what you are showing. - **A handful of single images** (screenshots in a tutorial, a hero product photo, an infographic): use the core Image block's "Expand on click." Zero plugins, thirty seconds of work.- **A real gallery** (a portfolio, a product grid, an event album) where people want to click through images with navigation, layouts, and filters: use Nexter Blocks. The Advanced Image block covers standout single images, and the Image Gallery block covers the full set. Most sites end up using both. The core toggle handles the one-off screenshots in your blog posts, and a block plugin handles the pages where images are the main event. Start with the free built-in lightbox, and only add a plugin when you actually hit its limits. ## Suggested Reading - [How to Create a WordPress Image Gallery Using Gutenberg](https://nexterwp.com/blog/create-a-wordpress-image-gallery-using-gutenberg/)- [Best Photo and Image Gallery WordPress Plugins](https://nexterwp.com/blog/best-photo-image-gallery-wordpress-plugins-3/)- [5 Best Popup Plugins for WordPress Compared](https://nexterwp.com/blog/best-popup-plugins-for-wordpress/)- [5 Best Video Gallery Plugins for WordPress](https://nexterwp.com/blog/best-video-gallery-plugins-for-wordpress/)- [Gutenberg vs Elementor in 2026](https://nexterwp.com/blog/gutenberg-vs-elementor/) #### Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress! Subscribe