www.wysiwygwebbuilder.com

[rz] Image DragScroll v1.3

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.


DEMO


HTML 4.01 Transitional
W3C compliant


* 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 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.

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


How to use?

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

Hope you can find this useful.
Enjoy!

New in this version:

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

I wish this forum had a "Like" button

thank you me for your feedback.
an update will soon be available, with a better charset than the current one - the online demo was updated but the extension will be available later, meanwhile, hope i can do an improvement...

* 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.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.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.

Thanks RZ! appreciate the time and effort.....fantastic extension, thumbs up!




Cheers,
Scott

thank you scott!
appreciated...

* 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.3

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