EverWeb Widgets

Responsive Grid Media

Thes widgets are for displaying images, slideshows and video using the CSS Grid Layout Module.
Click any widget icon to see the demo …

Main Image + 2 Image Links

The grid has a large image and two stacked smaller images. The images have captions which can be displayed on hover on computers.
The small images can be configured as links to open internal or external pages, a Vimeo or YouTube video in a lightbox or have a center play/pause button for M3 audio file playback.

MP4 Video Player + 2 Image Links

The grid has an MP4 video player and two stacked smaller images. The images have captions which can be displayed on hover on computers.
The small images can be configured as links to open internal or external pages, a Vimeo or YouTube video in a lightbox or have a center play/pause button for M3 audio file playback.

Lazy Load Slider + 2 Image Links

The grid has a lazy loading, captioned slideshow and two stacked smaller images. The images have captions which can be displayed on hover on computers.
The small images can be configured as links to open internal or external pages, a Vimeo or YouTube video in a lightbox or have a center play/pause button for M3 audio file playback.

Vimeo Video + 2 Image Links

The grid has a Vimeo video and two stacked smaller images. The images have captions which can be displayed on hover on computers.
The small images can be configured as links to open internal or external pages, a Vimeo or YouTube video in a lightbox or have a center play/pause button for M3 audio file playback.

YouTube Video + 2 Image Links

The grid has a YouTube video and two stacked smaller images. The images have captions which can be displayed on hover on computers.
The small images can be configured as links to open internal or external pages, a Vimeo or YouTube video in a lightbox or have a center play/pause button for M3 audio file playback.

Show More Image Grid

The lazy loading image grid can accommodate up to 100 images with captions. The images can be configured as links to open internal or external pages
The show more function has a button and the number of items to be loaded at page load and the number to be revealed on click can be set for both computer and mobile.

Show More Image Gallery

This is a gallery version of the above image grid and has the same lazy loading and show more functions.
Clicking or tapping any thumbnail image opens a larger version in a lightbox slideshow. The slides have captions derived from the alt text. The slideshow has directional arrows and a counter and the slides can be swiped on touch devices.

Lazy Loading Auto Image Grid

Tis image grid uses the CSS Grid Layouts auto and minmax functions to automatically change the number of images per row on different devices without having to use media queries.
The images have captions and can be configured as links. The images are lazy loading and there is a show more function.

Image Gallery

The last loading image grid has captions and launches a lightbox slideshow on click. There is an option for having a scale animation on hover on the thumbnail images.
The slideshow has directional arrows for navigation and the slides can be swiped on touch devices. There is a slide counter and large image captions.

Hero Slider

The full width, responsive fixed height slideshow has an invisible CSS grid laid out over the top of it so that the overlay items can be positioned anywhere over the image and remain in their relative position with varying browser/device width.
The overlay items are a heading, a text block with a heading and a paragraph and a CTA style link tab.

Animated Slider

This is an animated version of the above hero slide and has lazy loading imagesr
Each of the three items can have a different animation which is set on a per slide basis. The options are in down, in left, in right, in up or none.
The animation timing is set globally for each overlay item using the controls for duration and delay.

Auto Stop Slider

Autoplaying slideshows should not be used on pages that will be displayed on smart phones as they drain the battery and use up data allowances unnecessarily.
This slider has an option to autoplay through the slides and them stop at the last one. If the visitor wants to continue viewing the slides they can step or swipe back manually.

© EverWeb Widgets -