Image Gallery With Zoom/Rotate/Drag/Switch Support - jQuery imgZoomAndRotate

File Size: 7.62 KB
Views Total: 5888
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Image Gallery With Zoom/Rotate/Drag/Switch Support - jQuery imgZoomAndRotate

imgZoomAndRotate is a jQuery plugin that showcases your images in a lightbox with support for rotate, drag, switch, and zoom in/out.

Features:

  • Zoom in/out images with mouse wheel or Up/Down keys.
  • Rotate left and rotate right.
  • Switch between images with Left/Right keys.
  • Drags the image to any position on the screen.

How to use it:

1. Group your image with a CSS class as follows:

<img src="1.jpg" class="zoomImgs">
<img src="2.jpg" class="zoomImgs">
<img src="3.jpg" class="zoomImgs">
<img src="4.jpg" class="zoomImgs">
<img src="5.jpg" class="zoomImgs">
...

2. Load the needed jQuery library, jQuery mouse wheel plugin, and jQuery drag.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="jquery.drag.js"></script>

3. Call the function on the image to initialize the plugin.

$(function(){

  $('.zoomImgs').imgZoomAndRotate()

});

4. Enable/disable the infinite loop functionality when switching between images.

$(function(){

  $('.zoomImgs').imgZoomAndRotate({
    'loop':true
  });

});

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