EverWeb Widgets

Gallery Widgets

Responsive Grid Galleries

These responsive galleries and slideshows are designed using the CSS Grid Layout Module for better performance with much less code.
The first four galleries are for professional photographers who need to display a large number of images.
The Art Gallery widgets are designed to display images of artwork with varying dimensions and aspect ratio.
There is an image album for launching a lightbox slider from a single image, a hot depot image scroller, a hero auto slider, a fullscreen slider and a 3-in-1 slideshow.

Lazy Load Grid Gallery

The grid will create equal size thumbnails from any size of image and display the large image in a lightbox slideshow.
Captions can be added to appear on both the thumbnail image and in the slider.

Justified Gallery

A justified image grid to display random sized thumbnails. There is a "Show More" option and the number of rows to show can be specified.

Auto Gallery

Thumbnails are created automatically and images downloaded from a folder on the server. This option is not available for EverWeb hosting.

Flickr Gallery

Images are loaded from a Flickr account by entering the username and album ID.

Art Gallery Grid

A responsive grid for displaying artwork of various sizes with multi line captions and optional image links.

Art Gallery

The responsive grid with multi line captions opens a lightbox slideshow on click.
The grid is designed for displaying images of varying aspect ratio. The slideshow has captions, a counter and swipe navigation of touch devices.

Art Gallery - Pro Version

This has a similar thumbnail grid to the other Art widgets but has a fully functional lightbox slideshow with custom captions, image download, zoom and fullscreen options and a choice of 30 transitions.
The slider has a play/pause function with optional progress bar.

Scroller

Hot spot scrolling carousel with swipe on mobile for images of different sizes.

Hero Auto Slider

A full width, fixed height auto slider with animated overlay and pause on hover.

Fullscreen Slider

A slideshow with thumbnails which can open a fullscreen slider on click.

Image Lightbox Album

Launch a lightbox slideshow from a single image. with optional caption
Text panel with heading, description and optional link.

3-In-1 Slider

Set up as a slider, slideshow with thumbnail carousel and/or slideshow opens a lightbox gallery on click.
Slideshow and lightbox slider image captions.

Photographer's Gallery Comparison
Feature	Grid	Justified	Auto	Flickr
Lightbox Slider
Captions
Lazy Loading
Load More
Share Button
Fullscreen
Download Option
EverWeb Hosting *
Other Hosting *
Image Feed *

* see hosting info below

Choosing A Gallery

The type of gallery will depend on how many images are to be displayed and the type of hosting - EverWeb or other hosting service.
Lazy Loading
When a gallery has more than a dozen or so thumbnails, lazy loading is preferred so that the page can download in no more than 2 or 3 seconds.
The Justified Gallery does not lazy load the thumbnails because the script has to calculate the grid layout using the data from all the thumbnail images.
All the other galleries will lazy load the thumbnail images as they scroll into view. They can accommodate up to 480 images.
Hosting
The Auto Gallery is the best option for those who need to display large numbers of images. These need to be hosted on a server other than the EverWeb one. They require PHP and scripts to create the thumbnails and these cannot be uploaded to the EverWeb server at the time of writing.
Those using the EverWeb hosting service can upload large numbers of images To Flickr and arrange them into albums to be streamed to the gallery in EverWeb.

Preparing The Images

All the images used in a website should be resized before importing into EverWeb. There is no point in using an image with a 2000px width and a huge file file size if it going to be displayed at 800px wide on the page.
* Oversized images are the main reason why web pages don't download fast enough. *
Images
Images to be displayed in a lightbox slideshow only need to be about 1200px wide and certainly no more than 1600px. For responsive pages that will be displayed on mobile phones, smaller is better.
* Make sure the image file names have no spaces or special characters in them. *
Thumbnail Images
Obviously it is far better to create separate thumbnail images. The only exception is the Auto Gallery where the thumbnails are created in a separate folder on the server.
It is possible to load the full size images in the widget's Assets List for use as thumbnails and then reselect each one again as the large image. This should only be done by really lazy people where the full size images have been optimised and the total number of images is kept to 12 or less.
Resizing Images
The full size images should be assembled in a Finder folder and checked to make sure the file names have no spaces or special charactrs in them. They can then be batch resized in Preview.app to the required maximum width.
Resizing Thumbnails
Create a new folder for the thumbnail images, select all the large images (command + a), copy them (command + c) and then paste them (command +v) into the new folder.
Now they can be resized all at once use Preview.app …

Select all the images (command + a)
Double click them to open them all together in Preview
Select all the images in the Preview window (command + a)
Select "Adjust Size …" from the Tools drop down menu
Make sure the unit dropdown selector is set to "pixels"
Enter the required grid row height into the "Height" box
Click "OK"
Save the resized image (command + s)
Now select all the images in the thumbnails folder and drag then onto the Assets List in the gallery widget settings panel to load then all at once.
Rearranged the images by holding down the mouse on an image file name and drag it up or down the list to its new position