EverWeb Widgets

PhotoKit 2 Image Galleries

Most image galleries available to EverWeb users are just not suitable for use in responsive sites.This set of 16 widgets is for inserting various types of image galleries into responsive pages and use lazy loading for fast page download times.
Click any widget icon to see the demo …

View Cart Add To Cart

Even mobile pages need to download in less than 2 seconds and the main causing of slow download is improperly prepared and inserted images.
Find out how to prepare and insert images in EverWeb for faster download in the browser. Learn how to quickly prepare images for the web and how to create smaller mobile images in bulk using Preview.app.

The PhotoKit Filter Gallery widget is created using the CSS Grid Module has a lot of options. It's worth taking time to explore all these features.
The gallery will take images with different aspect ratios and automatically organise them into an orderly thumbnail grid. If more than a few images are inserted, the thumbnails can lazy load.

The gallery grid is similar to the previous widget except it does not have the link option but the images open a lightbox gallery on click.
The lightbox slideshow has a slide counter, captions and directional arrows for navigation with swipe on mobile devices. It also has the lazy load and shuffle options.

The gallery insets irregular sized thumbnails into a justified grid. The row height can be set and the gallery can be full width or centered with a maximum width.
The gap between the thumbnails can be adjusted as can the all around padding. The random feature will reorder the thumbnails on page reload.

One of the really usefull features of the CSS Grid Layout Module is the minmax() function which enables a minimum and maxoimum size to be assigned to the grid item. When use in conjunction with row height or auto rows it is possible to create a regular grid out of irregular thumbnail images and to make it responsive without using CSS media queries.

A carousel is best for displaying images that have a low aspect ratio - square or portrait. The carousel can be full width or centered with a maximum width setting. The wrapper has controls for adjusting the background color and its opacity.
The navigation can use swipe, arrows or pager and can be set for each device type.

A carousel that launches a lightbox image gallery is not a feature that is seen on many websites. It is a really good way to display a lot of images without taking up too much space or overwhelming the visitors with dozens of images in a grid. The carousel can be full width or centered with a maximum width setting. The wrapper has controls for adjusting the background color and its opacity.

The grid layout arranges thumbnail images with different aspect ratios into a uniform grid. The full size images are launched in a lightbox slider on click.
The number of thumbnail images per row at any given browser/device width is determined by the values enter for the item's minimum width and the row height. The row height can also be set to auto.

The gallery has a CSS Grid layout and can accommodate up to 480 thumbnails anf their full size counterparts. The grid spacing and all around padding can be adjusted and the number of items per row set for each device type.
Using a "more" function along with the lazy loading option means that a large number of images can be inserted on a page without the page download time being effected too much.

The justified image gallery uses jQuery and a plugin script to create the gird. This widget uses Flexbox to create the grid without the need for javascript. This makes it a much better option for responsive pages.
The Flexbox layout arranges thumbnail images with different aspect ratios into a uniform grid. The full size images are launched in a lightbox slider on click.

This gallery is used for displaying images that may upset some visitors. The gallery is covered by an overlay with adjustable color and opacity which has a warning notice.
The notice has a heading, text and an action button that fades out the overlay on click. The image order can be shuffled on page reload.

The widget creates a grid out of equal size thumbnail images which can be lazy loaded. The number of images per row can be set for each device type.
The overlay optional captions can be set to appear on hover when viewed on computers and the scale animation has controls for setting the animation time and scale amount.

The widget uses the Light Gallery scripts to create a lightbox slideshow with a lot of options including fullscreen and play/pause.
The grid is created using the CSS Grid Layout module for maximum flexibility and minimum code. The grid layout allows the item spacing to be adjusted with one control without effecting the other properties.

The CSS Grid Layout Module minmax() function is used in this widget to assign a minimum width to the grid item. This creates a regular grid out of irregular thumbnail.
The overlay can show on hover when viewed on computers and has controls for the background color, hover opacity and mobile opacity.

The widget uses the CSS Grid Layout Module to create a thumbnail grid of random sized images. The grid can have the images align at the top, center or bottom. They can have a border and/or a box shadow and the grid item spacing and all around padding is adjustable.
Captions are below the images and can run to two or more lines.

Each grid item has a thumbnail image that can scale on hover, an optional lightbox icon, a heading, an optional span for price/date etc and a CTA style link.
Design mainly for displaying products, the link can be used to open internal or external pages with more info or purchase.

This responsive and uniform grid is designed for displaying products and has options on a per item basis to add a corner sale tag and a struck out list price alongside a sale price in a different color.
The gallery can accommodate up to 480 images so the lazy loading function should be tirned on if more than a few images are inserted.