TMTG v1.3.2

Tim’s Multi Talented Gallery — an easy-to-use, vanilla JS gallery for the web.

TMTG turns a list of images into a complete slideshow, with arrows, captions, thumbnails, and fullscreen, plus swipe and keyboard controls. It’s one script and one stylesheet: no frameworks, no build step, no dependencies. Copy two files to your site, list your images, and the gallery starts by itself.

Mount Fuji, snow-capped, at sunset above a calm lake A blue and orange kingfisher perched on a branch A wide panorama of snowy mountain peaks The Earth rising above the Moon's horizon A bowl of knotted cardamom buns on a red checked cloth A tall, bullet-shaped tower lit in blue and red at night A woodblock print of a huge wave over three boats, with Mount Fuji behind An early biplane lifting off a sandy beach as a man watches A green and gold frog resting on a striped leaf A stone bridge over a river at dusk, with a domed basilica beyond A tall infrared image of glowing clouds of gas and dust in space Rows of thatched parasols on an empty beach in the evening A sepia photo of an old stone bridge in Paris, with Notre-Dame behind A red and a yellow pepper underwater, covered in bubbles A white castle with many towers on a wooded hilltop

Features

  • No dependencies. One script and one stylesheet, about 15 KB zipped.
  • Accessible. Keyboard controls, screen-reader labels, and reduced-motion support.
  • Touch-ready. Swipe, pinch-to-zoom, and phones held sideways.
  • Full-featured. Captions, thumbnails, fullscreen, and auto-advance.
  • Scriptable. Add images on the fly, and tmtgRun() loads them into the gallery.
  • Light on memory. Loads only the current image and two on either side.
  • 12 languages. Control labels follow your page’s language.
  • Secure. Works with a strict Content Security Policy and Trusted Types.
  • Easy to restyle. Colors, corners, and aspect ratio are CSS variables.
  • Free! Open source, under the MIT License.

Installation

  1. Copy tmtg-1.3.2.min.js and tmtg-1.3.2.min.css into the same folder on your site.
  2. Load the script in your page’s <head>, and list your images:
<script src="tmtg-1.3.2.min.js"></script>

<div class="tmtgContainer" id="tmtgContainer">
  <div class="tmtgGallery" id="tmtgGallery">
    <img src="data:," data-src="photo1.jpg"
         alt="Short description"
         data-description="Optional caption">
  </div>
</div>

That’s it. For options and styling, see the quick start or the full documentation.

What’s new

v1.3.2 — Website update

  • new website
  • docs updated, converted to html
  • LICENSE renamed to LICENSE.txt

v1.3.1 — Bugfix

  • data-src images now validate, with src="data:," placeholder

Earlier versions are in the full release notes.