THE MOLITOR FORUMS » Topic: USER EDIT: ZoomBox scrolling for zoomed-in images

hubit on "USER EDIT: ZoomBox scrolling for zoomed-in images"

hubit — Fri, 17 Mar 2017 09:44:32 +0000

Sorry for the late response. Yes you can see the example

https://goo.gl/BX99AC

THE MOLITOR on "USER EDIT: ZoomBox scrolling for zoomed-in images"

THE MOLITOR — Wed, 01 Mar 2017 12:03:02 +0000

Awesome. Thanks for sharing your customization! I would love to see a working example as well. :-)

theeviljam on "USER EDIT: ZoomBox scrolling for zoomed-in images"

theeviljam — Wed, 01 Mar 2017 05:07:57 +0000

Hey, I gave this a try but it didn't seem to work. Have you got a working example anywhere?

hubit on "USER EDIT: ZoomBox scrolling for zoomed-in images"

hubit — Wed, 01 Mar 2017 00:00:27 +0000

I forgot to mention that the javascript code is located at line 224 on #imgBox click function.

hubit on "USER EDIT: ZoomBox scrolling for zoomed-in images"

hubit — Tue, 28 Feb 2017 23:56:58 +0000

Hello, I came up with a solution for this problem. Its not the best code but its working. I thought that it could help someone with the same problem.

//wp-content/plugins/zoom_box/zoom_box.js
//First we get the image height and width
var image = new Image();
image.src = imageSrc;

var width = image.width,
    height = image.height;

//calculate the aspect ratio
var imgBoxWidth = jQuery('#imgBox').width();
var aspectRatio = width / height;
var imgHeight = imgBoxWidth/aspectRatio;

//this works on second zoom only, sets the container height and backgroun size
if(jQuery('#zoomBox.zoomOut').length)
   jQuery('#zoomBox #imgBox').css({'height': imgHeight, 'background-size': '100% ' + imgHeight + 'px'});
else
   jQuery('#zoomBox #imgBox').css({'height': '', 'background-size': ''});

Finally add this to your custom css

.zoomOut{
	overflow: auto;
}