Responsive Interactive JavaScript Lightbox & Image Viewer Library – PixelVoyager

PixelVoyager is a lightweight JavaScript library that creates responsive, interactive image viewers with zoom, pan, and rotate functionality across desktop and mobile devices.

How to use it:

1. Download the load the pixelvoyager.js script in the document.

<script src="pixelvoyager.js"></script>

2. Add your image to the image viewer.

• The <a> tag must have the class pixel-voyager-link.
• The href of the <a>
  Sponsored
  tag must point to the high-resolution image.
• The src of the <img> tag should be your thumbnail.

<a href="full.jpg" class="pixel-voyager-link">
<img src="thumb.jpg" alt="Example Image">
</a>

The library scans the DOM on load, finds all pixel-voyager-link anchors, and attaches the necessary event listeners. This structure also provides graceful degradation. If JavaScript fails, it’s still a functional link to the image.

3. For more control or for use in single-page applications, you can call the API directly.

PixelVoyager.openImage('/path/to/image.jpg');

4. All possible options to customize the image viewer.

• zoomMode: 'cursor' (default) or 'center'. Sets the zoom origin to the mouse pointer or the canvas center.
• cornerColor: A CSS color string. Default: 'rgba(64, 158, 255, 0.6)'. Sets the color of the UI corner indicators.
• moveThreshold: A number. Default: 1. The pixel distance the mouse must drag before a pan action starts.
• blockingDelay: A number. Default: 1000. Milliseconds to delay closing after a drag, which prevents accidental clicks.
• checkInterval: A number. Default: 15. The interval in milliseconds for mouse movement checks.

PixelVoyager.configure({
  zoomMode: 'cursor',
  cornerColor: 'rgba(64, 158, 255, 0.6)',
  moveThreshold: 1,
  blockingDelay: 1000,
  checkInterval: 15,
});

Keyboard Controls

• ESC – Close image viewer
• + / = – Zoom in
• - – Zoom out
• 0 – Reset view to original size and position

Mouse and Touch Controls

• Double-click – Toggle between fit-to-screen and magnified view
• Mouse wheel – Zoom in/out (respects zoom mode setting)
• Drag – Pan image when zoomed
• Touch gestures – Mobile-optimized pan and zoom

The post Responsive Interactive JavaScript Lightbox & Image Viewer Library – PixelVoyager appeared first on CSS Script.