Lightweight Gallery Lightbox with Zoom, Pan, and Keyboard Navigation – ImageViewer.js

ImageViewer.js is a lightweight Web Component that displays a group of images as a gallery in a full-screen lightbox.

It supports multiple images, touch gestures, and keyboard navigation. Simply add the script, and the library will do the rest.

Features:

• Mouse Wheel Zoom: Scroll to zoom in and out with smooth scaling.
• Drag to Pan: Click and drag to reposition the image within the viewport.
• Keyboard Navigation: Press ESC to close the preview, use arrow keys to move between images in a gallery sequence.
• High Resolution Support: Specify a separate high definition source URL that loads after the initial preview opens.
• Fully Customizable: Set zoom limits, target specific image selectors, and toggle rotation and download features through data attributes.

How To Use It:

1. Download the library and load the imageviewer.js script in the document.

<script src="/dist/image-viewer.min.js"></script>

2. The library will initialize on page load and bind to all image elements automatically. Clicking any image opens the full-screen preview overlay. You can zoom with the mouse wheel, drag the image when zoomed in, and press ESC to close the viewer.

<img src="photo1.jpg" alt="Mountain landscape">
<img src="photo2.jpg" alt="Ocean sunset">
<img src="photo3.jpg" alt="Forest trail">
...

3. Specify which images activate the preview functionality

<script id="gd-image-viewer"
  src="/dist/image-viewer.min.js"
  data-target-selector=".gallery-img">
</script>

4. When you want to show a low-resolution thumbnail first and then load a high definition version in the preview, add a data attribute to your image tags. The library displays the standard source immediately and fetches the high-resolution URL after the preview opens.

<img src="thumbnail-small.jpg" 
     data-highres="photo-full-resolution.jpg" 
     alt="Architecture detail"
     class="gallery-img">

5. Configure the image previewer by passing the following data attribute to the script.

• data-max-scale: Maximum zoom level. Defaults to 5 which allows users to zoom in five times the original size.
• data-min-scale: Minimum zoom level. Defaults to 0.5 which allows users to zoom out to half the original size.
• data-allow-rotate: Enables or disables the rotation button in the preview controls. Defaults to true.
• data-allow-download: Enables or disables the download button in the preview controls. Defaults to true.
• data-highres: Custom data attribute added to individual image elements rather than the script configuration.

<script id="gd-image-viewer"
  src="/dist/image-viewer.min.js"
  data-target-selector=".gallery-img"
  data-max-scale="8"
  data-min-scale="0.3"
  data-allow-rotate="true"
  data-allow-download="true">
</script>

Related Resources:

• Photoswipe: A JavaScript gallery library that handles touch gestures, responsive layouts, and dynamic content loading for image collections.
• GLightbox: A pure JavaScript lightbox component that supports images, videos, and iframes with customizable animations and themes.
• Viewer.js: An image viewing library built for jQuery that includes rotation, scaling, and full-screen modes with extensive API methods.
• Medium Zoom: A minimalist zoom effect that smoothly transitions images from their embedded position to a centered overlay view.

FAQs

Q: Can I exclude certain images from the preview functionality?
A: Yes, use the data-target-selector attribute to specify a CSS class or selector that matches only the images you want to preview.

Q: Does the high resolution image feature work with responsive images or srcset?
A: The library loads the URL specified in the data-highres attribute directly. It does not interact with srcset or picture elements.

Q: What happens if a high resolution image fails to load?
A: The library attempts to load the high resolution URL in the background after displaying the original source. If the high resolution version fails to load, the preview continues showing the original image without error messages or visual disruption.

The post Lightweight Gallery Lightbox with Zoom, Pan, and Keyboard Navigation – ImageViewer.js appeared first on CSS Script.