I use this plugin for a shop-type app where users upload their own product images so I don't have control over the size of images being used.
I've found that if the images used for the zoom are smaller than the zoomWindowHeight / zoomWindowWidth the zoomWindow goes a bit weird - especially when combined with the scrollZoom feature.
Currently the image is fixed in the top left corner of the zoomWindow with a white border around it - not a major problem but equally not ideal.
The bigger issue is when you zoom (via scrollZoom), the image zooms in but doesn't scroll when you move the mouse - it remains fixed to the top left corner.
My current workaround is to use the onShow callback with
onShow: function(self) {var img = new Image;img.src = self.zoomImage;var bgImgWidth = img.width;var bgImgHeight = img.height;if (bgImgWidth < self.options.zoomWindowWidth) {self.options.zoomWindowWidth = bgImgWidth;$(self.zoomWindow).width(bgImgWidth);}if (bgImgHeight < self.options.zoomWindowHeight) {self.options.zoomWindowHeight = bgImgHeight;$(self.zoomWindow).height(bgImgHeight);}}
This resizes the zoomWindow down to the size of the zoomImage if it is smaller than the current size.
It's probably not the best solution but I think there should probably be something along these lines built in to handle this situation.
I use this plugin for a shop-type app where users upload their own product images so I don't have control over the size of images being used.
I've found that if the images used for the zoom are smaller than the zoomWindowHeight / zoomWindowWidth the zoomWindow goes a bit weird - especially when combined with the scrollZoom feature. Currently the image is fixed in the top left corner of the zoomWindow with a white border around it - not a major problem but equally not ideal. The bigger issue is when you zoom (via scrollZoom), the image zooms in but doesn't scroll when you move the mouse - it remains fixed to the top left corner.
My current workaround is to use the onShow callback with
onShow: function(self) {var img = new Image;img.src = self.zoomImage;var bgImgWidth = img.width;var bgImgHeight = img.height;if (bgImgWidth < self.options.zoomWindowWidth) {self.options.zoomWindowWidth = bgImgWidth;$(self.zoomWindow).width(bgImgWidth);}if (bgImgHeight < self.options.zoomWindowHeight) {self.options.zoomWindowHeight = bgImgHeight;$(self.zoomWindow).height(bgImgHeight);}}This resizes the zoomWindow down to the size of the zoomImage if it is smaller than the current size.
It's probably not the best solution but I think there should probably be something along these lines built in to handle this situation.