Responsive Lightbox

The widget contains a thumbnail image with a lightbox icon and an optional caption which opens a single image or a slideshow in a lightbox window.
The above heading and this text are optional and are inserted before the thumbnail image. The image has a fixed - raher than a percentage - width so that it maintains its size when viewed on computers and tablet devices. On mobile phones, the image becomes full width.

Lightbox Slideshow

The thumbanil image and the corresponding large image are chosen first. The thumbnail image width is set alt text entered and the caption inserted if required along with the caption for the large image.
The remaining large images are dragged into the widget's Assets List and the file names are sselected to add their captions.
The large image has a setting for percentage width and the default is 90%. Note that these images are responsive but only up to the actual width of the image file.
The slideshow can be navigated on computers using the directional arrows or grab and drag. On touch devices, the arrows disappear and the slides are swiped.
There are controls for setting the transition time and for turning on "smart preload" and the slide counter.
In normal circumstances, a large images dpesn't download in the browser until the visitor actually attempts to navigate to it. This is why a lightbox slideshow is a much better way to display a number of large images on a web page since the page downloads a lot faster in the browser than if a standard slider is used. The smart loading allows the previous and next images to preload if required so that the visitor doesn't have to wait for the image to load when it is selected.
The lightbox is closed by clicking or tapping anywhere on the background or by using the "X" close button.
The widget can use a web safe fonr or a non web safe or Google hosted font with a web safe fallback.
The thumbnail image overlay caption has controls for font color, size and background color and opacity.
There are controls for setting the font size for the h1 and h2 headings, the font size and line hieght for the text and the container background color.
Text & Links
The text is entered as HTML so line breaks are created using <br>. Refer to the Info section for more details and how to use HTML for special characters.
Text hyperlinks can be created as described in the Info section and can be styled for color, hover color and text decoration.
Since the item created by the widget is responsive - and the page will be viewed on touch devices like the iPad and iPhone - the links have been given a suitable amount of top/bottom padding to make them an easier target for fingertips.
Container Styles
The overall padding can be adjusted and the container can have a border with adjustable width, color and radius. A box shadow can added using the controls for shadow radius and color.
A footer can be added so that the widget can create the content for a fully responsive page when used in conjunction with a suitable header/navigation widget.
The footer has options to turn on auto update of the copyright year and a smooth scroll, back to the top chevron tab. The footer can have a contrasting background color to provide visual separation from the content area.

© EverWeb Widgets -

EverWeb Widgets