MouseWheel zoom, and touch support?

[jeacott]

Would really like to see mousewheel zoom, and touch support. currently useless on mobile devices, and mousewheel feels much more natural than button clicks for zooming.

[styoe]

I agree on that, and those features were planned but there just wasnt enough time when the plugin was created. I will to extend it as soon as possible with those options. If you want, want, you could help? :)

[ijpe]

change code of line 302 to 328 before to that.img.offset(~~~)
add validation
var pageX;
var pageY;
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
} else {
pageX = e.pageX;
pageY = e.pageY;
}
var z_idx = that.img.css('z-index'),
drg_h = that.img.outerHeight(),
drg_w = that.img.outerWidth(),
pos_y = that.img.offset().top + drg_h - pageY,
pos_x = that.img.offset().left + drg_w - pageX;

that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
var imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
var imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
} else {
var imgTop = e.pageY + pos_y - drg_h;
var imgLeft = e.pageX + pos_x - drg_w;
}

[chrisedington]

@ijpe Could you please expand on how to implement the above code?

I dont have any line with that.img.offset(~~~) ?

Desperate to get it working - would really appreciate your help.

[ijpe]

My initDrag code

initDrag:function(){
            var that = this;

            that.img.on("mousedown touchstart", function(e) {

                e.preventDefault(); // disable selection

                var pageX;
                var pageY;
                var userAgent = window.navigator.userAgent;
                if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
                    pageX = e.originalEvent.touches[0].pageX;
                    pageY = e.originalEvent.touches[0].pageY;
                } else {
                    pageX = e.pageX;
                    pageY = e.pageY;
                }

                var z_idx = that.img.css('z-index'),
                drg_h = that.img.outerHeight(),
                drg_w = that.img.outerWidth(),
                pos_y = that.img.offset().top + drg_h - pageY,
                pos_x = that.img.offset().left + drg_w - pageX;

                that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {

                    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
                        var imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
                        var imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
                    } else {
                        var imgTop = e.pageY + pos_y - drg_h;
                        var imgLeft = e.pageX + pos_x - drg_w;
                    }


                    that.img.offset({
                        top:imgTop,
                        left:imgLeft
                    }).on("mouseup", function() {
                        $(this).removeClass('draggable').css('z-index', z_idx);
                    });

                    if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); }

                    if( parseInt( that.img.css('top')) > 0 ){ that.img.css('top',0);  if(that.options.imgEyecandy){ that.imgEyecandy.css('top', 0); } }
                    var maxTop = -( that.imgH-that.objH); if( parseInt( that.img.css('top')) < maxTop){ that.img.css('top', maxTop); if(that.options.imgEyecandy){ that.imgEyecandy.css('top', maxTop); } }

                    if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
                    var maxLeft = -( that.imgW-that.objW); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }

                    if (that.options.onImgDrag) that.options.onImgDrag.call(that);

                });

            }).on("mouseup", function() {
                that.img.off("mousemove");
            }).on("mouseout", function() {
                that.img.off("mousemove");
            });

        },

[chrisedington]

Thanks!

[chakrin]

Thanks so much. 👍

[sconsult]

An upgrade for Drag and mousewheel support has been done.
@ijpe Great work, could leverage your work mostly. Have mentioned you also in the upgrade description.

[ijpe]

Thank you for the upgrade.
On Feb 9, 2015 3:48 PM, "Mat Steinlin" notifications@github.com wrote:

An upgrade for Drag and mousewheel support has been done.
@ijpe https://github.com/ijpe Great work, could leverage your work
mostly. Have mentioned you also in the upgrade description.

—
Reply to this email directly or view it on GitHub
#13 (comment).