STHG

STHG: A lightweight HTML/CSS/jQuery gallery

We needed a lightweight, open-source gallery that was very simple. We wanted to be able to specify a set of images in an unordered list and have the gallery display the first, let you go to the previous or next image with a left or right button, and to display a title for each image.

We wanted very simple transitions, namely having the next or previous image slide in from the right or left, respectively. The only perhaps nontrivial requirement that we wanted clicking the "next" button on the last slide should have the first image slide in from the right, letting the user loop through the slides indefinitely.

A few minutes of Googling didn't yield such a gallery, so we made one: the SimpleTH Gallery, where "TH" stands for "trivial Hamiltonion".

HTML

Populate the <ul> with each image's source, alt tag, and description (in a <p> tag), make sure the paths to the images for your left and right buttons are correct, and you're done.

CSS

Make sure that the width and height attributes for the container div, list elements, and buttons are correct and you're done.

jQuery

Include your favorite version of jQuery and the included sthg.js script and your gallery will be fully functional, however barebones that functionality is.

Download

Backbone is available on GitHub, or you can directly download a .zip file here.