Draggable/Zoomable/Rotatable Image Viewer - jQuery zoomifyc

File Size: 30.9 KB
Views Total: 2691
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Draggable/Zoomable/Rotatable Image Viewer - jQuery zoomifyc

zoomifyc is a feature-rich jQuery image viewer plugin to open images in a fullscreen gallery lightbox with support for drag, zoom, and rotate.

More Features:

  • Responsive design.
  • Allows the user to switch between images.
  • Auto closes the lightbox on click outside.
  • Mouse wheel to zoom in/out images.
  • Keyboard interactions.
  • Simple to implement.

Keyboard Interactions:

  • Left/right arrows or A/D to navigate between images.
  • Up/Down arrows or W/S to zoom in/out images
  • ESC to close the gallery lightbox.
  • R to rotate images.

How to use it:

1. Insert your images into a container element as follows:

<div id="imgBox">
  <img src="1.jpg" alt="Image 1" />
  <img src="2.jpg" alt="Image 2" />
  <img src="3.jpg" alt="Image 3" />
  ...
</div>

2. Download the plugin and include the necessary JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="/path/to/dist/zoomifyc.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/zoomifyc.min.js"></script>

3. Initialize the plugin on the images and everything is ready.

zoomifyc.init($('#imgBox img'));

Changelog:

2020-06-03

  • Changed close button

This awesome jQuery plugin is developed by celineWong7. For more Advanced Usages, please check the demo page or visit the official website.