EverWeb Widgets

Image Lightbox & Zoom

A lightbox is a full size overlay which covers the web page content and displays a large size image, slideshow, video etc. The lightbox is opened by clicking or tapping a link which can be a thumbnail image, a CTA style tab or, less usefully, a text link.
Lightboxes use a jQuery plugin to create the magic. The scripts used in these single image lightbox widgets are much smaller and more effient than those used for an image lightbox slideshow.
A lightbox differs from a modal which tends to be used for popup window applications - either on click or on page load. See the Modals category of this site for examples.
Image zoom, in this case, means to zoom into the image without enlarging the container.
Zoom up acts like a lightbox except there is no background overlay and the page content can be seen behind the enlarged image.
Click any widget icon to see the demo …

Image Lightbox

Clicking or tapping a thumbnail image with an optional caption opens a full size image in a lightbox window.
The thumbnail can be styled for padding, background and opacity, border, border radius and box shadow if required.
The large image is responsive up to the maximum width of the image file. It is "bare bones" with no styling options and a simple close button.

Image Lightbox Captions

The thumbnail image has a full width overlay caption with adjustable background opacity.
The caption can be displayed on page load or not until the image is hovered on computers or tapped on touch devices.
The large image can also have a caption and a border if required.

Image Lightbox CTA Link

The widget creates a CTA style tab link which opens the full size image in a lightbox.
The tab can be styled for background color and opacity. height using padding, hover color and a border and/or box shadow.
The image is responsive up to the width of the image file.

Image Lightbox Text Link

This widget creates a text box with a paragraph and a text link which will open an image in a lightbox.
The text can use either a web safe or a non website font with suitable fallback and the link can can be styled for hover color and text decoration.
Padding can be added to the link to make it easier to tap when the page is viewed on a touch device like an iPad.

Click or Tap To Zoom In

An oversized image is inserted into a small container so that visitors can zoom in to see the detail.
This version zooms in and out on click or tap and is suitable for all devices.
The image can show a caption or a zoom icon which will disappear when in the zoomed state.
The caption can be styled and its background opacity adjusted.

Hover To Zoom In

This version zooms in when the image is hovered and has the same styling, caption and icon options as the previous one.
Since it uses the hover state to zoom the image, it is only suitable for full site use. Unless there is a separate version of the site for tablet users, it's better to use the click/tap to zoom in widget.

Zoom In 2X

This widget differs from the previous zoom in ones by using two images - one for the placeholder and the other for the zoom in state. This makes for better efficiency since the smaller image loads with the page content and the larger one only when required.
The image can have a responsive container with heading text and footer if required.

Zoom In Product Images

The widget creates a placeholder image and a row of thumbnails. Clicking a thumbnail opens the corresponding large image in the placeholder.
On computers, the placeholder is hovered to zoom in on the magnified image for more detail. On mobile devices, the zoom is achieved by dragging with a fingertip.

Zoom Up Image Tab Link

The CTA style link tab has options for styling it with a border and/or a box shadow. The background has variable opacity and there are separate controls for link color and hover color.
When the link tab is clicked or tapped, a larger image appears in the center of the viewport. The large image is responsive up to the maximum with of the image file.

Zoom Up Image

The thumbnail image has options for an overlay caption and an image expand icon and can be styled with a border and/or a box shadow.
When the thumbnail is clicked or tapped, a larger image appears in the center of the viewport. The large image is responsive up to the maximum with of the image file.

© EverWeb Widgets -