1

I've been assigned to make an image zoom in and zoom out javascript application, but with draggable image and when zoom in and out I must keep the viewing center of the container , in the center. I've done the zoom in part with all the calculation and keeping left, top ratio. using this http://jsfiddle.net/phHqQ/

$("#zoom").on("click", function (e) {
  var container = $("#container");
  var image = $("#container img");

  var css = {};
  css.height = image.height() + (image.height() * 0.2);
  css.width = image.width() + (image.width() * 0.2);

  var x = Math.abs(image.position().left) + container.width() / 2;
  var y = Math.abs(image.position().top) + container.height() / 2;
  var ratio = css.width / image.width();

  var newX = x * ratio;
  var newY = y * ratio;

  css.left = image.position().left - (newX - x);
  css.top = image.position().top - (newY - y);

  image.css(css);
});

please anyone can guide/make the zoom out feature from it

31piy
  • 23,323
  • 6
  • 47
  • 67
prem gupta
  • 69
  • 9
  • Do you want us to write the `zoom out` function? – Nisarg Shah Aug 05 '17 at 06:51
  • @NisargShah , if you can, thank you for it. , or you can guide me how to do it – prem gupta Aug 05 '17 at 06:52
  • see [Zooming graphics based on current mouse position](https://stackoverflow.com/a/37269366/2521214) and [C++ Zoom into the center of the screen in 2D coordinates](https://stackoverflow.com/a/21134042/2521214) – Spektre Aug 05 '17 at 08:53

1 Answers1

1

You could begin with your zoom-in function, and start by reducing the image's height-width. So, instead of adding to the height and width, you will now subtract from them.

css.height = image.height() - (image.height() * 0.2);
css.width = image.width() - (image.width() * 0.2);

Once you do this, the zoom-out functionality will start to work, but soon you'll realize that once you get to a size less than original, the image will start to develop a left-top margin. To prevent this, you need to check if the left and top values are getting positive during zoom out. If they do, you can set them to 0 so that the image will be moved to the top-left corner anyway.

css.left = css.left > 0 ? 0 : css.left;
css.top = css.top > 0 ? 0 : css.top;

As you go on, you will notice a few more of such problems, and you will have to handle some more scenarios to prevent the margins from growing.

Here's a fiddle: http://jsfiddle.net/phHqQ/261/

Update 1

At the time of zooming in, based on the center of container, some part of image might go out of the container, and it may develop some margin in the bottom-right part of the container. You could add these validations in the zoom-in function to ensure that whenever possible, while zooming in, the image will stay within the container.

if(css.height + css.top < 200){
  css.top = 200 - css.height;
}

if(css.width + css.left < 300) {
  css.left = 300 - css.width; 
}

Here's the fiddle updated with this code: http://jsfiddle.net/phHqQ/262/

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
  • but it doesn't keep the left and top ration when zooming out, it just keeps all 0 when goes positive .edit - im seeing the update now – prem gupta Aug 05 '17 at 07:26
  • thanx for correction zooming in , but im still stuck with zoom out – prem gupta Aug 05 '17 at 07:28
  • Yup I noticed that. It is a matter of preference. I tend to prefer that there is always some part of the image within the container. – Nisarg Shah Aug 05 '17 at 07:29
  • but how can i make it like zoomin , keeping the center in the center – prem gupta Aug 05 '17 at 07:31
  • In this [fiddle](http://jsfiddle.net/phHqQ/263/) I removed the second and third part of the code I have in my answer, and the image tends to stay in the center mostly. But after it gets pretty small, it starts to shift to bottom-right. Let me see if I can find out why. – Nisarg Shah Aug 05 '17 at 07:33
  • thanx sir, ill also try this – prem gupta Aug 05 '17 at 07:37