Image Galleries/Slideshows
A gallery consists of multiple images that can be browsed one by one. Only one image is viewed at a time. Often, several different options for navigating the gallery are provided to accommodate different browsing behaviors. It is common for a gallery to display the context the current image being views as in “Image 2 out of 18 images”, the shorter “2 out of 18”, or merely “2/18”.
Image galleries must not be used as carousels.
Navigation options often include:
- Previous and next image buttons
- A series of thumbnail images arranged in one of the following ways:
- Previous- and next images with links to these images
- The 2 or 3 of the nearest images (previous 2 or 3 and next 2 or 3 images) with links to these images
- A list of all images in the gallery arranged in a grid – often with 3, 4, or 5 images in each row.
- A text link after the image caption text saying “Next image”, “Next”, or the title of the next image.
- Tabs with image numbers linking to each image in the gallery.
- Clicking the current image itself tend to yield one of two effects: (1) Zoom the image or (2) navigate to the next image
- Keyboard arrow key listeners: left arrow fires a “show previous image” event, right arrow fires a “show next image” event.
Tips for designing a gallery:
Provide thumbnails and numbers
Thumbnails allow the user to find out where he or she is in the gallery: the context of the current image. Thumbnails also provide a great way to keep the user in the flow of going to the next image; if the image seems interesting in thumbnail mode it might be worth a click from the user’s perspective. Listing the gallery images as numbers allows for quick navigation. Highlight the current image to let the user know where he or she is in the gallery: the context of the current image.
Decide on auto (slideshow) or manual (or both)
Galleries (or slideshows) work in one of two ways: either they switch automatically from image to image after a set time interval, or buttons and other navigation elements are provided to let the user browse through images manually. Some galleries provide pause buttons and thus provides a mix between the two.
Reload the entire page or change only the important parts.
Newer galleries tend to be based on JavaScript where only the image, its context, captions, and comments are changed as opposed to having a complete page reload each time the user browses to a new image. This JavaScript way of browsing allows for much quicker navigation between images and provides a much more smooth and pleasing experience from the users perspective.