EverWeb Widgets

Colorbox Gallery

Heading

The gallery is created using the jQuery Colorbox plugin which is very versatile and popular. This version has been modified to generate the thumbnail s from the full size images. This allows images of different aspect ratios to be used while keeping the thumbnails iniform to fit the grid.
The thumbnail caption slides up on hover and will scroll if the caption length is wider than the thumbnail image. The large image caption is shown in the tooltip.
The lightbox image can have a different caption and a color border. The lightbox overlay opacity is adjustable.
The images in the grid can be arrange in rows and columns by adjusting the widget width and height using the drag handles and then fine tuning using the metrics inspector.

Colorbox Gallery Widget
Colorbox Gallery Widget

Widget Settings

Drag the images in a group from a Finder folder onto the Assets list in the widget settings or choose them individually from the main Assets list.
Highlight each image file name in turn to add the thumbnail and large image captions.
Set the required thumbnail image width and height and then adjust the widget size using the drag handles or the Metrics inspector to achieve the desired number of rows and columns.
Set the image grid background color and add a box shadow if required.
Style the thumbnail image captions and set the background color and its opacity.

Slideshow

Style the large image captions and the lightbox overlay and image border.
Set the transition type.
Check the box for autoplay and set the slide time in seconds.
Set the transition time in tenths of a second.
Enter the text for "Play" & "Pause".

Colorbox Image Gallery

This widget is included in the Album & Gallery widget pack.

EverWeb Widgets
© Roddy McKay - 2016
All Rights Reserved