Summary

Suppose you have a folder with images and videos somewhere, auto-indexed with nginx, like this one:

https://sandradodd.com/vlad/sample-images/

You can make a slide-show gallery out of the photos and videos in that folder like this:

<a gallery href="https://sandradodd.com/vlad/sample-images/">Photos</a>

So, it’s just a normal <a> tag, except for the gallery attribute. That’s it.

Live example: Gallery.

Apache auto-indexed folder

It can work the same way with an auto-indexed Apache-hosted folder: you just give the gallery attribute the value of “apache”.

<a gallery="apache" href="https://example.com/vlad/sample-images/">Gallery</a>

Advanced: Custom URL loader function

You can also define a custom function that returns the image and video URLs.

<a gallery="customLoaderFunction:loadUrls" href="#">Gallery</a>

This setup expects the global loadUrls function to exist, and return an array of strings, or a promise of an array of strings. The loader function will receive the gallery link element as its argument.

Live example: Gallery.

Here loadUrls is this function:

function loadUrls() {
  return Promise.resolve([
    "https://sandradodd.com/vlad/sample-images/pexels-yunus-tug%CC%86-15036477.jpg",
    "https://sandradodd.com/vlad/sample-images/pexels-lyn-ryan-18057909.jpg",
    "https://sandradodd.com/vlad/sample-images/pexels-luca-dross-10990181.jpg"
  ]);
}

If you want to have multiple galleries on the same page, you’ll have to have different functions for each one.

Inline image URLs

You can also give it the image URLs inside the gallery attribute, like this:

 <a gallery="
    https://sandradodd.com/vlad/sample-images/pexels-yunus-tug%CC%86-15036477.jpg
    https://sandradodd.com/vlad/sample-images/pexels-lyn-ryan-18057909.jpg
    https://sandradodd.com/vlad/sample-images/pexels-luca-dross-10990181.jpg
" href="#">Gallery</a>

NOTE: The href attribute is ignored in this case.

Live example: Gallery

How do I use it?

Include this script in your page:

<script src="https://cdn.jsdelivr.net/npm/website-photo-gallery-widget@1.4.2/website-photo-gallery-widget.min.js"></script>

Or get it from NPM:

npm install website-photo-gallery-widget

A (technical) note for auto-indexed folders

If the photos come from an auto-indexed folder, and the folder lives on a different server, that server needs to allow CORS access for the widget to be able to fetch the list of photos.

Questions? Ideas? Comments?

Post them on our discussion board!