EZ Gallery

Create a simple image gallery using CSS inspired by FrontPage 2003, with an optional lightbox powered by PhotoViewer.

Demo

Directions

Basic setup

Add the following code to your website's CSS.

/*** EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/ Released under the Unlicense - https://unlicense.org/ ***/ .ezgallery.montage { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 100%; } .ezgallery.montage img { flex: auto; margin: 0 5px 5px 0; object-fit: contain; object-position: bottom; } .ezgallery.horizontal { display: grid; grid-gap: 5px; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: minmax(100px, auto); } .ezgallery.horizontal a { text-align: center; } .ezgallery.horizontal img { text-align: center; vertical-align: middle; margin: 0 5px 5px 0; max-width: 100px; max-height: 100px; object-fit: contain; object-position: bottom; }

Then you can create a gallery anywhere on your webpage with the following code.

You can add as many images as you want. The CSS will look for <img> tags and arrange them on the page.
Change montage to horizontal in the class attribute if you want to use the horizontal style.
You should create smaller thumbnail images to embed on your page as previews, to save everyone's bandwidth and make the gallery load faster. The hyperlink on that line can then go the larger image.

Adding the lightbox

Instead of having your users go directly to the image in the browser, you can show your images in a lightbox. This gives everyone an easy way to look at, and move between, each image in your gallery. We're going to use PhotoViewer, a full-featured but easy to install script.

Copy and paste the following into the <head> of your page.

Copy and paste the following into a file called gallery.js:

/// // PhotoViewer launcher for EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/ // Released under the Unlicense - https://unlicense.org/ // Requires PhotoViewer - https://nzbin.github.io/photoviewer/ /// /// // CODE /// // Don't edit below this line unless you know what you're doing! /// (function () { const defaultOptions = { draggable: false, resizable: false, initMaximized: true, headerToolbar: ['close'], footerToolbar: ['prev', 'zoomOut', 'actualSize', 'zoomIn', 'next'], title: false, multiInstances: true, }; const galleries = document.getElementsByClassName("ezgallery"); for (let i = 0; i < galleries.length; i++) { let links = [...galleries[i].getElementsByTagName("a")]; for (let j = 0; j < links.length; j++) { let items = []; let itemOptions = {...defaultOptions, index: j}; links.map((link) => items.push({src: link.href})); links[j].addEventListener('click', (event) => { event.preventDefault(); new PhotoViewer(items, itemOptions); }, false); } } }());

Finally, copy and paste the following into your HTML, just above </body>.

Once you reload your page, every linked photo in your gallery will now open the expanded version in the lightbox, just like it does in the demo above.

You can, of course, save the PhotoViewer CSS and JavaScript files to your own webspace. Make sure to comply with the MIT license that it uses for copyright. It's easy to comply - just make sure that you don't remove the credits from the top of its CSS and JavaScript file.