EverWeb Widgets

Responsive Grid Justified Gallery

Auto Thumbnails

The justified grid is created from auto generated thumbnails. The thumbnail size is defined by the row height.
The horizontal and vertical spacing can be adjusted and the images can have a border if required.
The captions are derived from the image file name and can be truned off if required.
The images are loaded from the server using a PHP application so independent hosting is required.
Any number of images can be displayed and they lazy load as the page is scrolled.
The order in which the images are displayed can be set to "random" by checking a box so that the order is different each time the gallery is loaded.
Lightbox Slider
There are options to show/hide the items in the user toolbar at the bottom of the lightbox window. These are for captions, share button, download button and fullscreen button.
The share button allows sharing to Facebook, Pinterest, Tumblr, Twitter, Google +, VK and email.
The download button opens the image in a new window so that it can be dragged onto the visitor's desktop or right clicked for the other save options.
File Upload
The images and the required assets are uploaded to the server in a folder. The folder is referenced in the widget settings by entering the website URL and the folder name in the boxes provided.
Assets Folder
The default name for the folder is "ewJustifiedGalleryAssets" and this can be used "as is" for the first gallery. Inside is a folder for the images. Open this and drag all the gallery images into it and then upload the assets folder to the root folder on the server.
Subsequent galleries should have their assets in a folder with a different name. For example, the second gallery can have its folder named "ewJustifiedGalleryAssets-2" or any other name that doesn't have spaces or special characters and doesn't conflict with another folder in the root folder.
Photographers
The main use for this gallery would be to publish a large number of images for a client to view and select those required for prints or an album. In this case, the assets folder can have the client's name or ID. Make sure this has no spaces or special characters in it.
Note: When the images are uploaded to the server, the thumbnails are generated and stored in a folder "_thumbnails". If new images are uploaded to replace older ones, the thumbnail folder should be deleted and allowed to regenerate since it will contain redundant images.
Testing
When the widget is inserted on the EverWeb design canvas there is nothing to be seen but an empty box. Once the assets have been uploaded to the server, the gallery can be viewed by publishing the page to a local folder and launching it in the browser and iOS Simulator to test it.

© EverWeb Widgets -