EverWeb Widgets

Justified Random Image Lightbox Gallery

Caption [1] Caption [2] Caption [3] Caption [4] Caption [5] Caption [6] Caption [7] Caption [8]  Caption [9] Caption [10] Caption [11] Caption [12]

Random Gallery

The widget inserts a bunch of random size thumbnail images in a justified grid. Clicking or tapping any thumbnail opens the corresponding large image file in a lightbox slideshow.
Images
Normally, images for a website slideshow or gallery should all be cropped to the same size and aspect ratio. Occasionally, it may be necessary to display images with varying aspect ratio when creating a website for an artist.
The size of the thumbnail images in the grid is determined by the row height so all the thumbs should be reduced to that height before importing into EverWeb.
The large images displayed in the lightbox are responsive up to the maximum width of the image file. 1200px is a reasonable maximum size for landscape oriented images. Portrait images should be cropped to no more than about 960px in height.
Grid
The grid has options for setting the row height and a checkbox for justifying the last row if this is required. Justifying this row will cause any images to enlarge and fill the last row by increasing the height.
The spacing between the grid images can be adjusted along with the background color. In this example, the background is black and the spacing is set to 2px.
There is a separate control for adjusting the padding around the grid. If left at zero, the grid sits against the browser/device screen edges up to the maximum width setting.
Thumbnail captions can be turned on to show on hover when viewed on computers and on page load when viewed on touch devices.
Slideshow
The lightbox slideshow has options for showing the caption and setting the caption delay. Captions are derived from the alt text attribute so these should be entered for the search engines even if the captions are not visible to visitors.
The slideshow can have up to 100 images but it would be rather irresponsible to have even half of that amount! It has a setting for showing a slide counter when a large number of images are being displayed.
There are sliders for setting the width and height ratios for the slideshow images to allow the best compromise for the viewable area when images of radically different aspect ratio are being displayed. The optimum settings will depend on the image aspect ratios and can only really be determined by testing the result in the browser's responsive mode and in the various devices in the iOS Simulator.
Captions
The captions can have a web safe font or a non websafe or Google hosted font with a web safe fallback. There are controls for font size and color and the background color and its opacity.

© EverWeb Widgets -