Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Image DragScroll

This extension allows you to drag/scroll an image that is larger than its container.
The functionality is similar to Google maps or the Adobe's PDF reader "scroll while dragging" but for images.

- Zoom in/out.
- Back to initial zoom.
- Back to initial axis.
- Keyboard handling.
- Embedded objects.

Supported/tested versions:
IEquirks, IE7, IE8, IE9, Chrome, Firefox, Opera, Safari, Maxthon, Lunascape.

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 1.3

- Added RWD support.
- Improved position and size of the Control Panel.
- Added radius values for the Control Panel.
- Improved code.

* New in version 1.2

Reduced and optimized code.
Centralized objects manipulation, allowing several instances with a minimum impact in the final html size.
More buttons colors (normal-hover-push / border-face-icon / radius).
Control panel transparency for inactive and active modes.
Image pattern.
Can embed almost any object and "be part of the image".

* New in version 1.1.4

Workaround that solves a bug (touchscreen devices false positive) in Maxthon browsers.
Right click disabled by default (can be enabled via properties).
Better image relocation approach after resize.

* New version 1.1.3

This fix solves a minor issue introduced in "back to initial position" when the image is not centered and has horizontal and/or vertical offset.

* New version 1.1.2

This update is a workaround for a serious bug(s) introduced in Android 3 and 4 native browsers; the issue is still unresolved also in jQuery. Unfortunately, there are also other inconsistences.
This [pure Javascript and lightweight] temporarily solution is to bypass the impossibility to make a programmatically scrollable div and a reliable fingers detection; among other derivative consequences that make this extension almost unusable on tablets.
Hope this is solved in Android 4.1; meanwhile, I'm providing this patch that works pretty well in iPod, iPad, iPhone and Android 3 and 4 (and should be in other devices as well).
I think FireFox for tablets is one of the most promising and robust browsers, but users cannot be forced to download, install and use it; moreover, it is just a very personal opinion.
Please note, if the bug is officially solved, I will be removing the patch in future versions of this extension.

* New version 1.1.1

Better character set in Control Panel buttons.
Optimized keyboard handling in Control Panel eliminates unnecessary page scrolls in FireFox and Lunascape.
Control Panel doesn't flash anymore on mouse movements in Lunascape.
Improved startup for Opera and Chrome.

* New version 1.1

Control Panel (onhover/onfocus show with autohide, disable, colors, tooltips, position).
Image parameters (for resizing with custom incremental factors and initial reference position).
Zoom in/out.
Back to initial zoom.
Back to initial axis.
Better keyboard handling.

How to use?

1. Drag and drop the extension.
2. Enter the image (must be larger than the container).
3. Optionally, enter the image for the pattern that covers the image.
4. Setup just a few options or leave them as by default.
5. Preview or publish.
6. Drag the image to see it in action.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with