Overstuffed web pages really don't work for engagimg visitors. An image grid that opens a lightbox gallery proves the "less if more" approach.
Visitors feel overwhelmed when faced with to much stuff crammed into tight rows of boxes. Open up your web page design, keep the number of items on load to a minimum and use plenty of "white" space.
Use small onload images and then combine them all into a lightbox slideshow using the ThemeKit Combo widgets …
ThemeKit Combo is a set of widgets that group all the images in the various containers on the same page into one lightbox slider …
The link is optional and can open internal or external pages.
The item positions can be switched and the text can be above or below the image on screen widths below the break point.
Span
There are controls for adjusting the span font size and color.
The ThemeKit Combo Code widgets provides the scripts and styles for the lightbox slideshow and for lazy loading the thumbnail images.
Functions
The widget has all the controls for selecting the slideshow functions and setting the styles. It is inserted any where in the stack of widgets on the page and can also be used as a spacer and/or a smooth content fade in by checking a box and setting its animation delay time.
Content fade in provides a smooth, professional page load effect and also provides a slight delay to allow content to load for a better user experience.
The widget has a height control for use as a spacer or its height can be reduced to about 10px so that it is virtually hidden when its background color is to the same as the other items on the page or its opacity is set to zero.
Lazy Loading
Lazy loading can be applied to all the images that are present on page load by checking one box. This will produce faster page dowload time but is NOT a substitute for properly preparing and optimising image files before inporting into EverWeb.
The row can have either two or four images with cpations and icons
The slideshow has an optional counter, navigation arrows, close buttom and a caption holder. These can all be set to a custom font family and color.
The lightbox overlay has controls for the background color and its opacity so that the page content can remain partially in view when the slider is loaded if required.
The overlay can be completely remove by by checking a box.
Slide Captions
The captions can overlay the top or bottom of the image or be placed outside the image at the bottom. The captions have a setting for animation delay in milliseconds.
Lazy Loading
The slideshow images are laxy loaded by default. Checking a box allows the previous and next images to preload if required.
Navigation
The slides can be navigated using the direction arrows or grab and drag on computers and by swiping on touch devices. The arrows are hidden when viewed on tablets inportrait mode and mobile phones.
