EverWeb Widgets

Lightbox Slideshow

The responsive grid can show just a few images on page load and then load more in steps until all the images are loaded.
The number of images per row can be set for each device type. The number of images to show and the number to load on click can be set for both computer and mobile.
Thumbnail Images
These should be cropped to a suitable size before importing into EverWeb and then they can be dragged altogether onto the Assets List in the widget settings panel.
The thumbnails can have a caption which has the option of being displayed on hover when viewed on computers. The caption is derived from the alt text attribute so descriptive text should be entered even if the captions are not displayed.
Lazy Loading
The thumbnail images are lazy loaded so that only the images in view are downloaded at page load. More images are downloaded each time the "Load More" button is clicked. This really speeds up the page download time - especially for mobile device users.
Animation
When viewed on computers, the images can have an optional scale animation applied as well as having the caption animate in.
Grid
The grid can have a different color of background from the wrapper and both have an adjustment for background opacity.
The grid spacing can be adjusted from zero upwards.
Slideshow
The lightbox slideshow has options for an image caption which animates in and a slide counter. The slides are navigated using directional arrows on computers and by swiping on mobile touch devices.
The images are responsive up to their file width. Crop the images to the maximum value required before importing into EverWeb.
There are sliders for adjusting the width and height ratios of the slideshow to accomodate odd sized images if required.

Responsive Show/Hide Box

The show/hide box is a space saving item which can be added below any other item to provide more info on click. The toggle function uses a jQuery plugin to created the show/hide animation which has controls for adjusting the open and close animation times.
The box can be open on page load if required.

responsive show/hide box

The item is an HTML5 <article>. It has a tab for the trigger and a "body" for the content.
The trigger tab contains the "Show More" text when the body is hidden and "Show Less" text when the body is visible. The open and closed tabs can have different font color for better visibility.
The item ican be open on page load by checking a box to add the class "is-open".
The widget has a maximum width setting and the toggle tab can be aligned left, center or right in relation to the content. Both the open and close times can be adjusted in milliseconds.
How to create the list …

  • Click the Asset List Add button
  • Select the item in the Asset List
  • Enter the list item text
  • Click the entry in the Asset List to make it editable and give it a name or number
  • Set the list style and adjust the inset
  • Adjust the vertical spacing of the list items using the "List Line Height" control

The content area has options for an image, an h1 heading, a paragraph, a list with style options, another paragraph and a CTA style link.
The image is centered with an adjustable percentage width and becomes 100% wide when viewed on phones.
The link can be configured to open an internal or external page and in a new window if required.

© EverWeb Widgets -