Build a Photo Gallery Page With AI: Grid, Lightbox, and Captions

TLDR: You can build a photo gallery page with AI in one conversation. Do not ask for “a gallery.” Ask for the pieces that make one feel good: a responsive grid that reflows on phones, a tap-to-enlarge lightbox with swipe and arrow keys, captions, and lazy loading so a big set still loads fast. Request one self-contained HTML file, drop in your photos (paste hosted URLs, or reference an images folder and keep it as a project), iterate with short specific notes, then publish it as one live link so every photo and interaction works for whoever you send it to.

You have the photos. The trip, the wedding, the product shoot, the year of a side project. What you do not have is a decent way to show them. Texting twenty images is a mess, a shared cloud folder is a chore for the other person, and a slideshow file is stuck on your laptop. What you actually want is a page: a clean grid someone can scroll, tap a photo to see it big, read a caption, and move on. A real photo gallery.

That used to mean a website builder, a theme, and an afternoon. Now you can build a photo gallery page with AI in a single conversation, and it comes out as a fast, responsive page you fully control. This guide covers the whole thing: how to prompt for a gallery that does not feel stiff, how to get your own photos into it, how to keep it quick even with a hundred images, and how to hand it to someone as one link that just works.

What makes a photo gallery actually good

If you type “make me a photo gallery” into any AI model, you will get something. It will be a grid. It will also feel like a placeholder, because “gallery” alone tells the model nothing about the parts that make a gallery pleasant to use. Name those parts and the output changes completely.

A good gallery is really four things working together:

• A responsive grid. Photos laid out in columns that reflow as the screen gets narrower, with consistent gaps and no awkward stretching. Three or four columns on a laptop, one or two on a phone.
• A lightbox. Tap any photo and it opens large over a dimmed background, with a caption, an easy close, and a way to move to the next and previous photo. This is the single feature that separates a real gallery from a wall of thumbnails.
• Captions and structure. A title, maybe short captions per photo, maybe sections (“Ceremony,” “Reception,” “The dog stealing the show”). Structure turns a dump of files into something you actually enjoy scrolling.
• Speed. Thumbnails in the grid, full resolution only when someone opens a photo, and lazy loading so images below the fold do not all download at once. This is what keeps a big gallery from crawling.

Ask for those four things by name and you are most of the way there.

Prompt like you are describing the finished page

The reliable pattern is to write your prompt as a short spec, not a wish. Tell the AI the layout, the interaction, the look, and the format you want back. Here is a complete starter prompt you can paste into Claude, ChatGPT, or any capable model:

Build me a photo gallery web page.

Layout: a responsive masonry-style grid, 4 columns on desktop,
2 on tablet, 1 on phone, with even gaps and rounded corners on
each photo. A page title and a one-line intro at the top.

Interaction: clicking any photo opens it in a lightbox, the image
large and centered over a dimmed background. Show a caption under
it. Include next and previous arrows, keyboard arrow-key support,
swipe on touch screens, and close on Esc, on the close button, or
by tapping the dark area.

Performance: lazy-load images, and show smaller preview versions
in the grid while loading the full size only in the lightbox.

Look: clean and modern, lots of whitespace, a warm neutral
background, subtle hover lift on each photo, smooth fade when the
lightbox opens.

Use these images (title, then URL):
1. "Golden hour on the ridge" - PASTE_URL_1
2. "The old harbor at dawn" - PASTE_URL_2
3. "Market colors" - PASTE_URL_3

Deliver it as ONE complete, self-contained HTML file with all CSS
and JavaScript inlined. No external libraries.

Every line is pulling weight. The grid spec stops the model from guessing a column count. The interaction list is where most of the “feel” lives, and naming swipe and keyboard support up front saves you a revision. The performance line is the difference between a snappy gallery and one that hangs. And asking for one self-contained HTML file keeps the result portable, so you can publish it anywhere without loose files going missing.

For the look, borrow the vocabulary a designer would use. “Warm neutral background,” “subtle hover lift,” “lots of whitespace” art-direct the output without you drawing a thing. If you want the palette to feel intentional rather than default-blue, a few notes go a long way, and there is a whole guide to color palettes that make AI pages look designed.

Getting your own photos in

This is the step people trip on, so here are the two clean paths.

Path one: paste hosted URLs. If your photos already live somewhere with a public link (a cloud drive with sharing on, an image host), paste those URLs straight into the prompt as shown above. The AI wires each one into the grid. Fastest route, and the whole gallery stays a single HTML file.

Path two: keep it as a project with an images folder. If you would rather not host images separately, ask the AI to reference local files instead:

Reference the images from a local folder, like images/harbor.jpg,
images/market.jpg, and so on. Give me the HTML file plus a note of
exactly which filenames to put in an images folder next to it.

Now you keep the index.html and an images folder together as one project. This is tidy and fully self-contained, with one catch that matters at sharing time: those relative paths only work if the files stay together. Which is exactly why you do not want to email this around as a ZIP, more on that below.

Make it feel finished, not generated

The first build will work and look about eighty percent right. Closing that last twenty percent is a few rounds of short, specific notes, the same rhythm that works for iterating on any AI-generated page. Give one change at a time:

Four tweaks:
1. Tighten the grid gaps to 10px and round the photo corners more.
2. In the lightbox, show a small counter like "4 / 27" under the caption.
3. Add a soft zoom-in on each thumbnail when I hover it.
4. Group the photos into two sections with headings: "Morning" and
   "Evening," each with its own subgrid.

A few polish moves punch above their weight in a gallery:

• Preserve aspect ratios. Tell the AI not to crop every photo into a square unless you want that. A masonry grid that respects each photo’s shape looks far more considered than a forced grid of squares.
• Add captions that say something. “IMG_4471” helps nobody. A location, a name, a one-liner turns a scroll into a story.
• Handle the empty and loading states. A gentle placeholder color while an image loads, and a graceful look if one fails, keeps the page from flashing awkwardly.
• Do not forget the phone. Most people will open your gallery on a phone. Check that the grid collapses cleanly and the lightbox swipes. If it does not, say so plainly and it gets fixed. The general playbook is in making AI pages mobile friendly.

If this gallery is going to live inside a bigger site, the same techniques carry straight over to a portfolio website built with AI, where the gallery becomes one section among several.

Now get it out of the chat and in front of people

Here is where a gallery is different from a document, and where most AI-built galleries quietly die on a laptop. A gallery is interactive. The whole point is tapping a photo to enlarge it, swiping to the next one, reading the caption. None of that survives the usual ways people try to share.

• A screenshot captures one frame of a grid and kills every tap, swipe, and enlarge. It is a picture of a gallery, not a gallery.
• A ZIP of the HTML and images folder asks the other person to download, unzip, find index.html, and open it, and half the time a relative image path did not survive the trip, so they open a page of broken thumbnails. There is a reason emailing ZIP files deserves to die.
• A cloud folder of the raw photos makes the recipient do the scrolling, downloading, and guessing. That is not a gallery, that is homework.

What you want is the real, running page at a single web address. Publish it and the interactivity comes with it.

This is exactly what VisiblePage does. Paste the gallery’s HTML and you get a live URL on the spot. If your gallery is the project version with an images folder, drop the whole ZIP in instead, and it unpacks and hosts the entire thing, HTML and every image, with the paths intact, behind one link that loads fast from the edge. Either way, whoever you send it to opens the actual gallery: taps a photo, it enlarges; swipes, it moves; on any device, with nothing to install.

A couple of settings are genuinely useful for photos. You can keep a gallery password-protected while it is only for the family or the client, then flip it public later. And when you add the photos you forgot, you re-publish to the same URL, so the link you already sent now shows the new set and nobody is ever looking at an old version. If the gallery earns a real home, you can even point your own domain at it, so it lives at something like photos.yourname.com.

Try it now: Publish your AI-built photo gallery with VisiblePage and get a live link in seconds.

The whole build, in one table

Frequently asked questions

Can AI actually build a photo gallery?

Yes. A photo gallery is a grid of images with a tap-to-enlarge view, and that is standard, well-trodden HTML, CSS, and JavaScript that modern AI models write cleanly in one conversation. Describe the layout, the lightbox behavior, and the look you want, ask for one self-contained HTML file, then drop your images in. You get a working gallery without touching a code editor.

How do I add my own photos to an AI-built gallery?

Two ways. For a quick gallery, upload your images to a host and paste the URLs into the prompt so the AI wires them into the grid. For a self-contained project, ask the AI to reference local files like images/beach.jpg, then keep the HTML and an images folder together and publish the whole thing as a ZIP so the paths stay intact.

How many photos can a single gallery page hold?

Dozens is fine, hundreds needs care. The trick is to load the full-size image only when someone opens it. Ask the AI for lazy loading and smaller preview thumbnails in the grid, with the full resolution shown only in the lightbox. That keeps the page fast even with a big set.

How do I make the gallery work on phones?

Ask for it in the first prompt. Say the grid should reflow to one or two columns on small screens, the lightbox should support swipe left and right, and tap targets should be large. A gallery that looks great on a laptop but pinches awkwardly on a phone is the most common miss, so name mobile behavior up front.

How do I share the finished gallery?

Publish it as a live link. Paste the HTML, or drop the ZIP if it has an images folder, into VisiblePage and get one URL that opens the real, interactive gallery on any device. Update the same page when you add photos and the link never changes, so nobody is ever looking at an old version.

The short version

A folder of photos deserves better than a group text. Prompt AI for the four things that make a gallery good, a responsive grid, a real lightbox, captions, and lazy loading, and ask for one self-contained HTML file. Drop your photos in by URL or as a local images folder, then polish with a few short notes until it feels finished. Publish the HTML or the ZIP as one live link, and send that. An hour of your time, no code editor, and your photos finally have a home people can actually enjoy.