ThemeKit AUI

Lightbox Slideshow

ThemeKit AUI Lightbox

Lightbox Slider

The two column grid layout has an image with alt text and an icon in one column.
The other column has a text block with heading, text, styled spans an an optional internal link.
Slideshow
Clicking/tapping the image opens the lazy loading slider in an overlay with adjustable background color and opacity.

Media

Slideshow

Most slideshows aren't suitable for responsive web pages unless they are modified to add the essenetials like images inserted in three sizes and lazy loading.
A lightbox slider allows all the images to be lazy loaded since they are offscreen at page load. Using an article with the image as the action function for opening the slider and a text description make for good presentation and search engine indexing.


On Load Item

The two column grid has adjustable relative column widths. The layout can be switched above the breakpoint and the text can be above or below the image below it.
There are controls for adjusting the column gap above the breakpoint and the row gap below it.
Image
The image has alt text, a lazy loading option and an icon with controls for coloe and background color and its opacity.
Text
The text block has a heading, text and font size and color controls to style spans.
The optional internal link has a background hover animation when viewed on computers.
Containers
The image and text block can have a border and/or bottom box shadow and the text block adds the function to remove the bottom border when the shadow is present.

Lightbox Slideshow

The slider images are lazy loading by default and are inserted in three sizes for computer, tablets and phones in portrait mode.
It has a fade transition and the transition time control sets the timing in milliseconds.
The images in the example were optimised and resized before importing into EverWeb …

  • Large Image: 1200px x 800px
  • Tablet Image: 720 x 480px
  • Phone Portrait Image: 375 x 540px

Slideshow Stage

The slider is centered in the overlay and has controls for adding a border and/or a box shadow. The close tab has controls for icon color and background color and opacity.
The action tabs and the caption share the controls for color and background color and its opacity.
The controls are at the bottom left for the convenience of computer users and switch to left and right, vertically centered on tablets.
The controls can be removed on smaller devices by checking a box and choosing a breakpoint.
Overlay
The lightbox overlay has controls to set the background color and its opacity.

© EverWeb Widgets -

Menu