EverWeb PhotoKit

Timed Overlay

Lightweight Overlay

A timed overlay which fades in gradually can be less obtrusive than other methods of drawing visitor;s attention to special offers, latest news etc. This overlay uses a CSS animation to open it and a single line of Javascript to close it by click it or the close button
The centered info container has options for an image with alt text, a mobile version of the image, a heading, optional text and an optional CTA style link.
The animation time and delay are set in seconds and the overlay background color and its opacity can be adjusted.

Resizing Images

Responsive Image Prep

Assemble the images for a web page in a Finder folder. Make sure the image file name has no spaces or special characters. Use hyphens insted of spaces.
Double click the image file to open it in Preview.app and reduce its size as shown in the screenshots below.
Duplicate the image and rename it so that it will be recognisable as the smaller mobile version. For example, change "image-file.jpg" to "image-file-m.jpg"

PhotoKit Picture Insert Widget
Adjust Image Size
PhotoKit Picture Insert Widget
Resulting Size
PhotoKit Timed Overlay

PhotoKit Widgets

The new PhotoKit widgets are designed to insert images, sliders, slishow alternatives and image galleries in responsive pages without effecting page download time.

PhotoKit