i'm working on zoom functionality. zoom fixed box 100% of window size , inside image 200% of width of fixed box.
this zoom needs work this:
- when cursor in center of window, image should in center.
- when cursor in top right corner, image should stay @ top right corner of window (so reach image corner)
- when cursor in middle bottom corner, image should center horizontally , reach total bottom, can see middle bottom part of image.
- and on.
i make approachment, can't reach corners perfectly. snippet (see comments in onmousemove function):
var zoom = function(imagezoom) { this.urlimage = imagezoom; this.img = undefined; this.$img = undefined; this.init = function() { this.loaders("on"); this.calcs(); }; this.calcs = function() { var self = this; this.img = new image(); this.img.onload = function() { self.build(); }; this.img.src = this.urlimage; }; this.loaders = function(status) { switch(status) { case "on": $('#loader').fadein(200); break; case "off": $('#loader').fadeout(200); break; } }; this.build = function() { var self = this; this.$img = $(self.img); $('#zoom').fadein(200).append(this.$img); this.$img.on('mousedown', function(e) { e.preventdefault(); }); // problematic function $('body').on('mousemove', function(e) { e.preventdefault(); // calc percents of window var px = 100 * e.pagex / $(window).width(); var py = 100 * e.pagey / $(window).height(); // calc of percent pixel of image var fx = self.$img.width() * px / 100; var fy = self.$img.height() * py / 100; // render left / 2 , top / 1.5 (the 1.5 value imaginary!!) self.$img.css({'transform': 'translate('+ -(fx/2) +'px, '+ -(fy/1.5)+'px)'}); }); self.loaders("off"); }; }; var zoom = new zoom("http://dummyimage.com/2000x1230/000/fff"); zoom.init();#zoom { position: fixed;; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; display: none; } #zoom img { width: 200%; height: auto; position: absolute; cursor: crosshair; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loader">loading</div> <div id="zoom"></div>the problem put fx/1.5 because fx/2 doesn't work. horizontal value works perfecly.
what value can config reach corners? why left value (division of pixels 2) works when top value doesn't?
you close. need calculate image.height - window.height when getting vertical percentage.
this work different image aspect ratios, since takes image height account when making calculations. width non-issue since double window width.
var zoom = function(imagezoom) { this.urlimage = imagezoom; this.img = undefined; this.$img = undefined; this.init = function() { this.loaders("on"); this.calcs(); }; this.calcs = function() { var self = this; this.img = new image(); this.img.onload = function() { self.build(); }; this.img.src = this.urlimage; }; this.loaders = function(status) { switch (status) { case "on": $('#loader').fadein(200); break; case "off": $('#loader').fadeout(200); break; } }; this.build = function() { var self = this; this.$img = $(self.img); $('#zoom').fadein(200).append(this.$img); this.$img.on('mousedown', function(e) { e.preventdefault(); }); // problematic function $('body').on('mousemove', function(e) { e.preventdefault(); var wx = $(window).width(); var wy = $(window).height(); var iy = self.$img.height(); var px = e.pagex; var py = e.pagey; var tx = -1 * (px / wx) * wx; var ty = -1 * (py / wy) * (iy - wy); self.$img.css({ 'transform': 'translate(' + tx + 'px, ' + ty + 'px)' }); }); self.loaders("off"); }; }; var zoom = new zoom("http://dummyimage.com/2000x1200/000/fff"); zoom.init();#zoom { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; display: none; } #zoom img { width: 200%; height: 100%; height: auto; position: absolute; cursor: crosshair; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { margin: 0; } * { box-sizing: border-box; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loader">loading</div> <div id="zoom"></div>as bonus:
if want rid of empty space left when aspect ratio of image high (jsfiddle), can make sure image height @ least equal window height (jsfiddle). but, need set width: auto in case, image not twice wide window.
Comments
Post a Comment