EverWeb Widgets

Colorbox Menu Image Gallery


The widget uses a navigation menu to open the lightbox slideshow rather than text links which are inappropriate for modern web designs which may be viewed on touch devices.
Using a navigation menu to launch images allows for a size of tab suitable for fingertips. Note that the height of of these tabs should have a minimum of 28px. Any less and Google will deduct points from your "Mobile Compatibility" score.
The navigation has many styling options to allow it to fit into any web page design.

Colorbox Menu Gallery Widget
Colorbox Menu Gallery Widget
Image Gallery Colorbox Menu Links


The images will be display up to their actual width. In other words, if the image is only 600px wide, that's the width it will be displayed at no matter how wide the browser is set.
Images that are wider than the browser width will be displayed at the "Max Width" setting which is a percentage of the browser width.

Widget Settings

Choose the images and highlight each file name in turn to add the navigation display name and the image title which appears as the image caption in the slideshow.
Check the box if a heading is required and enter it.
Set the navigation background color and its opacity and the overall padding.
Set the border width, color and corner radius if required.
Set the box shadow color and radius if required.

Link & Text Styles

Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size, color and hover color.
Set the background and hover background colors.
Set the link text alignment and the value for LR Padding.
Use the value for TB padding to adjust the height of the link tabs.
Adjust the vertical spacer height as required.


Set the transition type and the transition speed in tenths of a second.
Set the maximum percentage width of the slides.
Set the slideshow overlsy opacity.

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

EverWeb Widgets
© Roddy McKay - 2016
All Rights Reserved