Fullscreen Image Zoom and Pan with Jquery

Original 1.x version written by Samil Hazir. Version 2.x written by José M. Alarcón.

Fullscreen Image Zoom and Pan with Jquery

Features:

• Automatically add zoom and pan to any images or elements with images
• Auto-apn alongside pointer movement
• Zoom in and out support. You can increase or decrease the zoom level with specific buttons or with the mouse wheel
• Support for mobile devices. You can pan dragging the zoomed image
• Support from IE8+ and modern desktop and mobile browsers

Getting Started

Include jQuery and the plugin on a page and initialize the plugin. See a working demo at https://jmalarcon.github.io/jquery.pan/ or check the index.html page of this repository.

Works with all versions of jQuery, from 1.x to the latest ones.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.pan.js"></script>

<script type="text/javascript">
    $(function(){
        $(".pan").pan();
    })
</script>

If there's a data-big attribute in the element then that URL will be used for the zoomed image. If there's not, then it should be an <img> element and the src attribute will be used to zoom the image, since a lot of images are limited in size to fit in their container (for example with the max-width property). Check out the index.html sample file in the repo.

<a class="pan" data-big="img/big1.jpg" href=""><img src="img/small1.jpg" alt="" /></a>
<img class="pan" style="max-width:150px;" src="img/big2.jpg" alt="" />

It only adds the zoom capability to images that are smaller than their natural size. The pan() method filters out the jQuery selection and returns a jQuery selection with the final elements that have been processed to have zoom & pan capabilities. You can further process them as usual with jQuery, for example:

$(function(){
    $(".pan").pan().each(function() {
        $(this).attr('title', 'CLICK TO ZOOM');
    });
})

License

Copyright (c) 2016 Samil Hazir Dual licensed under the GPL and MIT licenses.