Image Album Gallery
Image grid galleries are fine for displaying a dozen or so images - especially if they use separate thumbnails. When the number of images exceeds about 24, another method of displaying them is required since a larger number of images will slow the web page download time to crawl.
An album consists of a thumbnail image which, when clicked or tapped, opens a light box slideshow. They are ideal for displaying a large number of images or for dividing images into categories.
When the web page is opened in the browsers, only the small thumbnail images need to be downloaded. When a thumbnail is clicked, only three large images are loaded - the first, the second and the last. The other images only download as the visitor advances through the slideshow.
The thumbnails have an overlay caption which can appear on hover or on page load. If the captions are set to appear on hover, they will automatically be changed to appear on load when the page is viewed on a touch device like an iPad or iPhone since hovers don't work on these devices.
The caption use a web safe font or a non web safe or Google hosted font with web safe fallback and can be styled for font size, color and background color and its opacity.
The container can be styled for padding, background color, border width, color and radius and box shadow color and radius.
The image captions are derived for the alt text attribute so, even if captions are not being displayed, a description should be enterred for the search engines.
The slideshow has options for show/hide captions and counter and is navigated using directional arrows and grab and drag on computers and swipe on touch devices. Both the slide transition time and the caption delay time can be adjusted.
The slideshow is responsive and can handle images with different aspect ratios. The maximum image width is equal to the width of the image file so this should be taken into account when cropping the images prior to importing them into EverWeb.
When using images of different aspect ratio, there are controls for setting the width and height ratios to prevent odd shape images from overflowing out of the viewport.