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
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 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 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
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
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
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
The image can have a responsive container with heading text and footer if required.
Zoom In Product Images
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
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
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.