Seeking a way to incorporate both zooming and panning into a div element using CSS3. The goal is to have the flexibility to zoom in, pan, zoom in further, pan again, zoom out, and so on.
I have successfully implemented ZOOMING by following the guidance provided in this thread:
CSS3 zooming on mouse cursor
which offered an incredibly insightful solution detailed here:
CSS3 zooming on mouse cursor
Now, the challenge at hand is: How can I integrate PANNING with the aforementioned ZOOMING approach?
My initial attempt involved utilizing jQuery UI draggable http://jqueryui.com/draggable/ in the following manner:
<div id="graphics">
$("#graphics").draggable();
$("#graphics").draggable('enable');
However, I encountered an issue where the image would "jump" when dragging it while zoomed-in.
A comprehensive answer to this quandary could be beneficial to many individuals, considering that this functionality is fundamental yet lacks a definitive solution despite exhaustive searches across the web!