Found this tool to be super useful, quick, elegant, and extremely simple to use. However, many of the images we deal with in web apps on a day-to-day basis originate as scans which can arrive in unpredictable orientations, so the lack of rotation capability was a pain point for us. So I made a few quick additions to your code to allow for rotation and will attach them here. Also updated the control icons to make them a bit more visible since we found the original controls were too hard for many users to spot.
Extracting the current transition state directly from CSS styles is difficult, so the rotation functions which I've added lean on storing the current rotation state in a 'data-' attribute of the 'PanImg' element. This has the added benefit of your preferred rotation being sustained throughout a page session even if you close the image previewer and return to it later.
I haven't done much in the way of platform testing the additions, but verified they work as expected on at least Chrome (79), IE(11), Edge, and Droid Chrome. Rather than fork your project - just passing along my adjustments and will leave it up to you if you think they are worth inclusion in an update, or inspire something similar of your own making.
Additions to jquery.pan.css:
.panWrapper a.controls.rc {
background-image: url('img/rotateClockwz.png');
margin-left: 60px;
}
.panWrapper a.controls.ra {
background-image: url('img/rotateAntiClockwz.png');
margin-left: -60px;
}
Additions to jquery.pan.js:
icon instantiations
var rc = document.createElement('a');
$(rc).addClass("controls rc");
$(panWrapper).append(rc);
var ra = document.createElement('a');
$(ra).addClass("controls ra");
$(panWrapper).append(ra);
and two new functions
$(rc).click(function (e) {
var panImg = $(".panWrapper img.i");
var angle = (panImg.data('rotAngle')) || 0;
angle += 90;
if(angle > 360){angle = angle-360};
panImg.css({'transform' : 'rotate(' + angle + 'deg)'});
panImg.data('rotAngle', angle);
panInit(e);
});
$(ra).click(function (e) {
var panImg = $(".panWrapper img.i");
var angle = (panImg.data('rotAngle')) || 0;
angle -= 90;
if(angle < 360){angle = angle+360};
panImg.css({'transform' : 'rotate(' + angle + 'deg)'});
panImg.data('rotAngle', angle);
panInit(e);
});