About the Photo Gallery Widget
Zyff's photo gallery widget builds an image gallery with a lightbox for any website, free. Choose a uniform grid that crops every tile to the same shape, masonry that keeps each photo's own proportions, a carousel, or a filmstrip that scrolls sideways. Clicking a photo opens it full size, with arrow keys to page through and Escape to close. Zyff does not host or resize the images — you paste URLs from wherever they already live — and every tile loads lazily, so a sixty-photo gallery does not fetch sixty images at once. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a photo gallery to your website
Add your photos
Paste an image URL for each photo and write a caption. The caption doubles as the image's alt text, so write it even if you keep captions hidden.
Pick a layout and a crop
A uniform grid is the tidiest option for photos from mixed sources; masonry keeps every original shape and never crops. The carousel and filmstrip page through a long set in a small space.
Decide what a click does
Open the photo full size in the lightbox, or follow a link you set on it. The lightbox pages with the arrow keys, closes on Escape, and returns focus to the tile that opened it.
Copy the embed code
Paste the container div and script tag where the gallery should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Photo Gallery Widget does
A lightbox that behaves
Arrow keys page through, Escape closes, the page behind cannot scroll while it is open, and focus returns to the thumbnail that was clicked rather than dumping a keyboard visitor back at the top of the document.
Four layouts
A uniform grid in square, landscape or portrait, masonry that keeps every photo's own proportions, a paged carousel, and a filmstrip that scrolls sideways in one row.
Lazy by default, always
Every tile carries native lazy loading regardless of the widget's own setting, because a long gallery fetching every full-size image at once is a far bigger cost to the page than the widget itself.
Captions that are alt text
The caption you write is used as the image's alt attribute, so the gallery is described properly to a screen reader whether or not the captions are visible.
Photos stay yours
Zyff does not host, store or re-encode the images. The widget loads each from its own URL, so replacing the file there updates it everywhere the gallery is embedded.
Nothing to slow your page
The widget itself runs in the visitor's browser from the settings in your snippet and makes no request to Zyff when your page loads.
At a glance
| Photos | Up to 60, each with an image URL, caption and optional link |
|---|---|
| Layouts | 4 templates: uniform grid, masonry, carousel, filmstrip |
| Crops | Square, landscape 4:3, portrait 3:4, or keep the original shape |
| Columns | 1 to 6, dropping to 2 below 900px and 1 below 560px |
| Lightbox | Keyboard paging, Escape to close, focus returned to the opener |
| Image hosting | None — the widget loads your images from their own URLs |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a photo gallery to my website?
Paste an image URL for each photo in Zyff's builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Does Zyff host my images?
No. You paste a URL for each photo and the widget loads it from there. That means Zyff never stores your pictures, and replacing the file at that URL updates the gallery everywhere it is embedded without you touching the snippet.
What size should the images be?
Around 1600px on the long edge is a good compromise for a gallery with a lightbox. Every tile loads lazily, but a 6MB photo straight off a camera is still 6MB when someone scrolls to it — and the lightbox shows the same file, so it has to be big enough to look right full screen.
What is the difference between the grid and masonry?
The grid crops every photo to the same shape, so the rows line up and the gallery looks tidy even when the sources are mixed. Masonry keeps each photo's own proportions and packs them into columns, so nothing is cropped but the rows are deliberately uneven. Use the grid for product shots and masonry for photography.
Does the lightbox work with a keyboard?
Yes. Arrow keys page through the photos, Escape closes it, and when it closes focus returns to the thumbnail that opened it rather than to the top of the page. The page behind is also prevented from scrolling while it is open, so closing the lightbox leaves the visitor where they were.
Will a big gallery slow my page down?
Not much, because every tile carries native lazy loading and only fetches when it is scrolled near. The widget itself makes no request to Zyff at all when your page loads. The one thing that will slow it down is uploading unresized originals — that is the part worth getting right.
Can each photo link somewhere instead of opening?
Yes. Set a link on a photo and switch the lightbox off, and clicking the tile follows the link instead. With the lightbox on, a click always opens the photo — one click cannot sensibly do both.
Where do I paste the gallery embed code?
Wherever the photos should appear — a portfolio page, a product page, or partway down a home page. Put the container div in that spot and keep the script tag with it.
Is the photo gallery widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Gallery by Zyff" link, which is how the tool stays free. The grid and masonry layouts are both free, the lightbox is free, and there is no limit on photos below 60. A paid plan adds the carousel and filmstrip layouts, full colour control and removes the attribution link.