EverWeb Widgets

PhotoKit

Most image insert and slideshows available to EverWeb users are just not suitable for use in responsive sites.This set of widgets is for inserting images, slideshows and slider alternatives into responsive pages.
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.

Lazy loading is technique that defers loading of off-screen resources at page load time. Images that are not in the viewport at page load can be prevented from downloading until the visitor starts to scroll down the page. The widget offers lazy loading as an option since any images that will be in the viewport when the page loads don;t need the function.

The Lazy Load widget described above is used for inserting an image on its own. If several images need to be stacked vertically - with options for captions, descriptions and links - this widget will do the job quickly and efficiently.
It can accommodate up to 48 images with a smaller version for mobile users and, of course, lazy loading.

It does make any sense to force mobile device users to download a large image that computer users required. The "picture" element enables different images to be displayed for different devices or screen sizes.z
In this application it is used to give the option to display a smaller image file for tablets in potrait mode and mobile phones.

WebP is an image format developed and first released by Google in 2010. It supports encoding images in both lossless and lossy formats, making it a versatile format for any type of visual media, and a great alternative format to both PNG or JPEG. WebP's visual quality is often comparable to JPEG but the file is a fraction of the size. Learn how to convert to WebP and inset them in EverWeb.

Showing a large number of images in a grid means that the browser has to download all the images at page load and the visitor can get overwhelmed. Showing a images at page load and having a "show more" function allows the visitor to focus on fewer images and the remaining images can be lazy loaded on click. This means that the browser doesn't need to download more images until the "More" button is clicked.

A slideshow suitable for responsive pages needs two important features - lazy loading images and having a the ability to insert a smaller image file for mobile device users.
This slider is a perfect replacement for those that aren't suitable for responsive sites and has options for a page, captions and image links.

Scroll snapping is the act of adjusting the scroll offset of a scroll container to be at a preferred snap position once the scroll operation is finished.
Scroll snapping is used in this widget to allow visitors to scroll through the images by swiping across their magic mouse or trackpad. Those who don't this function can use the scrollbar.

The PhotoKit Snap Hero widget overcomes all the disadvantages of a Hero slider by displaying a smaller image file for mobile devices, lazy loading the images and using CSS snap rather than Javascript to slide the images.
The obvious advantages are that no scripts need to be downloaded and it doesn't require jQuery or Javascript which makes it ideal for responsive pages.

The text over image has a heading, text and an optional link and can appear on hover when viewed on computers.
Using the align-content and justify-content selectors, the text position has nine options. In the first item above, the text is positioned horizontally "left" and vertically "end". The first image has the text positioned "center" and "center".

The images in the Vertical Slider can be displayed at full width, fixed height or at viewport height to fill the browser or device window. The slides are navigated using a pager on computers and swipe on touch devices.
There are options for captions and to configure the images as links. When the slider is full height there is an option to have a smooth scroll down function to the next item on the page.

The widget creates an image overlay with heading, text, optional extra text and a link. The overlay can be open or hidden at page load and is triggered by an info icon at the top right.
There is an option to load a smaller image file for mobile devices and to hide extra text to prevent it from overflowing.

The grid takes a bunch of images with varying aspect ratio and inserts them in a column grid. The grid items have options for a heading, descriptive text and a link which can be configured to open internal or external pages.The grid can have up to 480 images which can be lazy loaded. There is a shuffle option to randomly change the order on page load

A timed overlay for responsive pages needs special consideration. If an image is present, it needs to have a smaller version for mobile users.
The overlay has options for an image, heading, text and a link. The fade in animation is created using CSS and there is only one line of Javascript required to close it.

To make it suitable for responsive pages a hero image needs to have the image file inserted in three sizes to suit the various viewing device types.
The hero has an overlay with a text section which has a heading, paragraph and an optional link. The overlay can fade in over time if required.

The widget creates a justified grid from a bunch of thumbnail image with different aspect ratios. The grid can be closed or have gaps between the images. It can be either full width or centered with a maximum width.
There are lazy loading and shuffle on reload options. The optional captions are set to show on hover on computers and the optional image links are not used.

The widget creates a justified grid from a bunch of thumbnail image with different aspect ratios.
The grid can be closed or have gaps between the images. It can be either full width or centered with a maximum width.
Captions and links are optional and the captions can animated in on hover when viewed on computers.

An adaptive height slideshow is one that adjusts its container height to accomodate images with varying aspect ratio rather then forcing the image to fit a preset container.
The slideshow has maximum width settings for large screen, tablets and mobile phones. Images have an alt text attribute and a caption that sits below the image.

The slideshow has been modified for artists and photographers to show images with varying aspect ratio at their best. The slider has image captions and a slide counter.
The slideshow stage can be varied using one of the several image crop modes and by adjusting the height ratio slider.

Before and after images are inserted on on top of the other and are revealed using a center slider bar. Images are loaded for both computer and mobile to make it suitable for responsive pages.
Optional labels and the overlay can be customised for both computer and mobile visitors or the overlay can be hidden if not required..

This is a cleaner, simpler version of the above widget which allows more styling options for the labels and slide tab and the option for a border.
The images can be switched quickly by clicking/tapping the appropriate label.