EverWeb Widgets

Responsive Grid Widgets [3]

Responsive widgets based on the CSS Grid Layout Module for better responsive page layouot with less code. Image and lightbox grid, image album. hero image and a unique switch slider.
Click any widget icon to see the demo …

View CartAdd To Cart

Switch Slider

A hero slider is good for pages viewed on a computer but not so ideal when the page is viewed on a tablet or mobile phone. This slider overcomes the problem by having a fixed height when viewed on computers which switches to a responsive height on mobile devices. The height is set in viewport units rather than pixels so that it will occupy the same proportion of the viewable areas height no matter what the browser window height is set to.

Hero Header

The header inserts the image in three sizes - one for each device type. The h1 heading bar can overlay the top or bottom of the image and there is an option to add a logo.
The centered text box has a heading and a paragraph and has the option to draw on animated bored on page load. The transparent overlay can also animate in.

Main Image Grid

The main image sits at the top of the grid and fills the width of it. The remaining images form rows below it and the number of items per row can be set for different browser/device widths.
The rest of the images have alt text, optional caption and can be configured as links and these can open in a new window if required.

1 + 4 Image grid

The grid has a main image in one column and a grid of four smaller images - two per column. On tablets, two of the smaller images switch their position to below the other and on mobile phones the images occupy three rows.
The images have a caption and can be configured as hyperlinks. They can show the caption and the link icon on hover when viewed on computers.

Auto Grid

The widget will create a uniform grid from images of varying aspect ratio. The grid uses the "auto-fit" and minmax values to create rows which adapt to varying browser/device width without having to use media queries. The images use the "object-fit" selector set to "cover" to get them to fit the equal width columns. The images can be configures as links if required.

Auto Gallery

This is a gallery version of the Auto Grid widget. The thumbnails are links to larger versions of the image which are launched in a lightbox slideshow on click or tap.
The gallery slides have image captions, directional arrows and a slide counter. The arrows can be hidden on touch devices where the slides can be swiped.

Image Grid

The image grid is created from same size thumbnails with alt text and a caption below the image. The caption can extend to two or more lines if required.
The number of items per row can be set for each device type. and the images can be configured as hyperlinks to internal or external pages and open in a new window if required.

Image Gallery

This is a gallery version of the Image Grid widget. The thumbnails are links to larger versions of the image which are launched in a lightbox slideshow on click or tap.
The gallery slides have image captions, directional arrows and a slide counter. The arrows can be hidden on touch devices where the slides can be swiped.

Image Album

An image album is a much better option for a responsive web page than either a slideshow or a gallery grid. It only requires one image to download with the rest of the page content.
The image sits side by side with a text block on wider screens. The text slides below the image when viewed on touch devices. Click the image opens a lightbox slideshow

Image Pro Album

The widget has a captioned image which opens a lightbox slider side by side with a text box with heading, text and an optional link. The text slides below the image when viewed on touch devices.
The lightbox slideshow has a range of professional features such as play/pause. image download, slide captions, zoom and fullscreen mode.

Random Grid

The image grid is created from varying size thumbnails with alt text and a caption below the image. The caption can extend to two or more lines if required and the images can be made round/oval if needed.
The number of items per row can be set for each device type. and the images can be configured as hyperlinks to internal or external pages and open in a new window if required.

Random Gallery

This is a gallery version of the Random Grid widget. The thumbnails are links to larger versions of the image which are launched in a lightbox slideshow on click or tap.
The gallery slides have image captions, directional arrows and a slide counter. The arrows can be hidden on touch devices where the slides can be swiped.

© EverWeb Widgets -