Fullscreen Image Zoom and Pan with Jquery
Clone or download
Latest commit 22a7433 Dec 5, 2018


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


  • 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">

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:

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


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