EverWeb Widgets

Image [1]
Image [1]
Image [2]
Image [2]
Image [3]
Image [3]
Image [4]
Image [4]
Image [5]
Image [5]
Image [6]
Image [6]
Image [7]
Image [7]
Image [8]
Image [8]
Image [9]
Image [9]
Image [10]
Image [10]
Image [11]
Image [11]
Image [12]
Image [12]

Lazy Loading Auto Grid

Auto Grid

Responsive grids normally require media queries to change the number of items per row for different browser/device widths. The CSS Grid Layout Module has an "auto-fit" function which can automate these layout changes. To determine the size of the items in the grid, the minmax function is used. In this case, the minmax value has a minimum value in pixels and a maximum value of 1 fractional unit.
This widget is ideal for those who want to create a responsive grid without having to consider layout changes for different viewing devices.
Images
The images should be cropped to the maximum required image width before importing into EverWeb. In this case they are 360px wide.
The images have an alt text atribute for entering keywords for SEO.
Images can have a captions which have the option be displayed on hover when viewed on computers. The caption is an overlay at the bottom of the image and has controls for setting the font family, size, color and the background color and its opacity.
The images can have a border using the controls for border width, color and radius.
Links
The images can be configured as hyperlinks. This option is turned on globally. The links can be configured to open internal or external pages and open in a new window if required.
For more info about creating links using relative and absolute file paths, follow the link below.
Grid
The grid has controls for spacing the items and for adjusting the overall padding. The background has controls for adjusting its color and opacity.
The grid has a vertical spacing control to adjust ithe distance from the items above and below.

Link Info

Show More & Lazy Loading

The widget has an optional"Show More" function. This determines the number of images that appear on page load and the number of images that appear each time the "Show More" tab is clicked.
These numbers can be reduced for when the page is viewed on mobile phones.
The lazy loading script ensures that only the viewable images are downloaded by the browser at page load. Others are downloaded each time the "Show More" tab is clicked
The advantages of using a "Show More" function along with lazy loading are that the page will download much faster in the browser and the visitor will not be overwhelmed by a large number of images all at once.
Follow the link below for a grid without the auto fit.

Image Grid

© EverWeb Widgets -