Image Gallery Generator with Lightbox (HTML, CSS, JS)

A good photo gallery on a product page, portfolio or landing page needs three things: a layout that looks tidy on every screen, a lightbox that opens images large with keyboard and swipe support, and code that does not slow the page down. Gallery plugins do this, but they add scripts on every page, often need a license for commercial sites, and break when a theme or builder changes.

This generator writes one self-contained snippet instead: plain HTML, a small CSS block scoped to your gallery, and a short vanilla JavaScript lightbox written for this tool. It has no dependencies and loads nothing from other sites except your own images. You can paste it into Shopify, WordPress, Webflow, a static site or any page builder that accepts custom HTML.

How to create an image gallery

1. Paste image URLs into the box, one per line, and click Add URLs. To set alt text at the same time, add it after a vertical bar: https://example.com/dress-front.jpg | Red linen dress, front view. Addresses must start with https:// (or / for images on your own site).
2. Or drop images from your computer into the upload box to try the layout. Uploaded files stay in your browser for the preview only (see the section on hosting below). The generator opens with 8 sample images in different shapes so you can try the layouts; click Remove all before adding your own, and Load sample images to bring them back.
3. In the list, write alt text for every image and an optional caption. Use the arrows to change the order and the cross to remove an image. Images that fail to load or lack alt text are flagged in red.
4. Pick a Layout: Grid, Masonry, Justified rows or Carousel, and set the columns, thumbnail shape, gap, corner radius and captions.
5. Choose Lightbox options: zoom, keyboard arrows, swipe, thumbnail strip, counter, loop, autoplay slideshow and a dark or light background.
6. Check the live preview on Desktop and on Phone 390 px, on a light or dark page. Click an image in the preview to try the lightbox.
7. Click Copy code and paste it where the gallery should appear, or click Download .html file to get a complete page you can open or upload.

The four layouts compared

Grid

Every image is cropped to the same shape with object-fit: cover, centered. Choose Square 1:1, Landscape 4:3, 3:2 or 16:9, Portrait 3:4 or 4:5, or Original shape to skip cropping. On tablets (900 px wide and under) the grid drops to at most 3 columns, and on phones (600 px and under) it uses your phone column setting.

Masonry

Masonry uses CSS columns, so it works without JavaScript and never crops. One thing to know: images flow down the first column, then the second, so the reading order runs top to bottom rather than left to right. If order matters (step 1, step 2, step 3), use Grid instead.

Justified rows

The generator reads each image's width and height and writes its shape into the code. The browser then fits as many images as it can into each row at roughly your row height and stretches the row to fill the width, without cropping much. The last row keeps its natural size instead of stretching. On phones the row height drops to 55% so rows still hold two or three images.

Carousel

The carousel uses native scroll snapping, so swiping on phones and trackpads feels smooth, plus previous and next buttons and a dot for each image. On phones it always shows one image at a time. The Original shape option falls back to 4:3 here so all slides line up.

Lightbox options

With Open images in a lightbox turned on, each image becomes a link to the full image. Clicking it opens a full-screen viewer. If JavaScript is blocked, the link still opens the image on its own, so nothing breaks.

• Zoom: a zoom button and double click toggle 2x zoom; drag to move around the zoomed image.
• Keyboard arrows: left and right arrows move between images.
• Swipe: on touch screens, swipe left or right to change images.
• Thumbnail strip: small previews under the image; the current one is highlighted and scrolls into view.
• Counter: shows the position, such as 3 / 8.
• Loop: goes from the last image back to the first. Without it, the arrows stop at the ends.
• Autoplay slideshow: adds a play and pause button and starts a slideshow when the lightbox opens, at 2.5, 4, 6 or 8 seconds per image.
• Background: dark (almost black) or light (almost white).

Captions you add appear under the image in the lightbox, and the next and previous images are loaded in the background so moving between them is quick.

Turn the lightbox off for a simple display gallery: images are then shown without links and the snippet contains no JavaScript at all (unless you use the carousel, which needs a few lines for its buttons).

Accessibility built into the code

Galleries are a common accessibility problem, so the generated code handles the basics for you:

• Every image carries the alt text you wrote, and the stats line counts images still missing it.
• The lightbox is a proper dialog (role="dialog" and aria-modal="true") with labeled buttons.
• Focus moves into the lightbox when it opens and is trapped there: Tab and Shift+Tab cycle through its buttons only.
• Esc closes the lightbox, and focus returns to the image you opened, so keyboard users do not lose their place.
• Clicking the dark background around the image also closes it, and the page behind does not scroll while it is open.
• Focus outlines are visible on images and buttons, and the hover zoom effect switches off for visitors who ask their device to reduce motion.
• With captions set to show on the image, they appear on hover and keyboard focus, and always on touch screens that have no hover.

Good alt text describes what matters in the photo for someone who cannot see it: "Sand linen dress on a model, back view with tie detail" is useful, "IMG_2231" or "dress" is not. Alt text also helps image search, which ties into your product SEO; our Shopify SEO guide covers the rest.

Uploaded images and hosting

A gallery on a live page needs every image at a public web address. When you upload files here, they are read into the browser as data only for the preview; nothing is sent to our server, and we cannot host them for you. You have three choices in Uploaded images in the code:

1. File name (the default): the code uses each file's name, such as sunset-beach.jpg. Upload the images to the same folder as the page and it works as is, or replace each name with the full URL after you upload them elsewhere.
2. Embed as base64: the image data goes into the code itself. The gallery then works without any hosting, but the code becomes very large (roughly a third bigger than the image files) and images cannot be cached. Use it only for a few small images or an offline file.
3. Best for most sites: upload the images to your platform first and paste their URLs. In Shopify, go to Content > Files, upload, and copy each link. In WordPress, open Media > Library, click an image and use Copy URL to clipboard.

Adding the gallery to your site

Each gallery has an ID (default gallery), and all of its CSS is scoped to that ID so it does not change the rest of your page. If you put two galleries on one page, give each one its own ID in the generator, such as lookbook and reviews. The images use width and height attributes to prevent layout shift, the first four load right away and the rest load lazily as the visitor scrolls.

Worked example: a product lookbook

A clothing store wants a lookbook for a new linen collection with 9 photos: 5 portrait and 4 landscape. The owner uploads them in Shopify under Content > Files, copies the 9 URLs and pastes them here with alt text after each bar. Justified rows at 260 px keep every photo uncropped and fill the width neatly. Captions show the product name below each image. In the lightbox, thumbnails, counter, swipe and zoom are on, so shoppers can check the fabric texture at 2x. The code comes to about 18 KB before images. The owner pastes it into a Custom Liquid section on the lookbook page and links each caption's product in the page text below.

For the product pages themselves, the store keeps Shopify's built-in media gallery, and uses this generator for editorial pages where the theme's gallery options are limited.

Troubleshooting

An image shows "Could not load this image"

The URL is wrong, the file is private, or the host blocks use on other sites. Open the URL in a new tab: if it does not show the image on its own, the gallery cannot show it either.

The gallery looks unstyled after pasting

Some editors remove <style> or <script> tags. Switch to the HTML or code view of your editor, use a Custom HTML or Custom Liquid block as shown above, and paste again.

The lightbox does not open

Check that the whole snippet was pasted, including the script at the end, and that the gallery ID is unique on the page.

Masonry order looks wrong

Masonry fills columns top to bottom. Reorder the list, or switch to Grid or Justified rows for left to right order.

Limits to know about

• We do not host images. Live galleries need hosted URLs or files next to the page.
• One image URL serves both the thumbnail and the large view; there is no separate thumbnail size.
• Videos are not supported, only images.
• Your settings are not saved between visits. Keep the downloaded .html file as your copy.

If you are building a whole content site rather than one page, AM Jarvis AI Site Builder creates complete niche websites with pillar pages, product pages and schema on your own AI key.