1

I'm working on a small zoom plugin, zoom In is working great so far:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

    <style>
      .zoom {
        position: relative;
        width: 400px;
        margin: 0 auto;
        height: 500px;
        overflow: hidden;
      }

      img {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }

      .container {
        padding-top: 200px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
      }
    </style>


    <script>
      var _scale = 1;
      var defaultWidth;
      var defaultHeight;

      var widget = {

        init: function() {

          setTimeout(function() {
            defaultWidth = $('img').prop('width');
            defaultHeight = $('img').prop('height');
          }, 100);

          $('.zoom').on('click', function(e) {

            var scaleDelta = 0.5;
            var currentScale = _scale;
            var nextScale = currentScale + scaleDelta;
            var mousePosOnImageX = (e.pageX - $('.zoom').offset().left);
            var mousePosOnImageY = (e.pageY - $('.zoom').offset().top);

            var offsetX = -(mousePosOnImageX * scaleDelta);
            var offsetY = -(mousePosOnImageY * scaleDelta);

            offsetX = offsetX + parseFloat($('img').css('left').split('px').join(''));
            offsetY = offsetY + parseFloat($('img').css('top').split('px').join(''));

            $('img').css({
              width: defaultWidth * nextScale,
              height: defaultHeight * nextScale,
              left: offsetX,
              top: offsetY
            });

            _scale = nextScale;

          });
        }

      };

      $(document).ready(function() {
        widget.init();
      });
    </script>


</head>
<body>
  <div class="container">
    <div class="zoom">
      <img src="https://s7d1.scene7.com/is/image/BHLDN/44945368_007_a?$zoom-xl$" />
    </div>
  </div>
</body>
</html>

Demo: http://jsfiddle.net/SySZL/220/

Note: The code is crap, I'm just playing around...

As you can see you can zoom In around a point. It's been 5hours I'm stuck to do the same for zoom Out, I believe it's just the "inverse" of the formula I wrote for zoom In, any thoughts?

Jeremie Ges
  • 2,747
  • 3
  • 22
  • 37
  • If you think about it, zooming in and out are really the same thing. Zoom in adds to your scalar and zoom out subtracts from your scalar. By default it is x1. Zooming in might add 0.1 to the value resulting in x1.1. Zooming out simply subtracts 0.1 from that and becomes x1. – Derek 朕會功夫 Oct 20 '17 at 01:08
  • That's part is easy, I'm speaking more about the left/top values to zoom out from a point. – Jeremie Ges Oct 20 '17 at 01:09
  • Don't you just change 0.5 to -0.5? – E Rullmann Oct 20 '17 at 01:09
  • Yes, what about the left / top position though? – Jeremie Ges Oct 20 '17 at 01:10
  • @JeremieGes You are missing my point. What I'm saying is that there should only be one "formula" - one function for zooming in and out. What you need is simply `f(fx, fy, ix, iy, scale)` (frame xy and image xy in [0,1]) to calculate the appropriate transformation. – Derek 朕會功夫 Oct 20 '17 at 01:15
  • It's best to calculate the absolute zoom, not the relative. This way zooming out becomes just as easy as zooming in. I made a [post](https://stackoverflow.com/questions/46647138/zoom-in-on-a-mousewheel-point-using-scale-and-translate/46833254#46833254) about that today, it was for mousewheel zooming tho... maybe you it's some use to you. – Manuel Otto Oct 20 '17 at 01:33
  • @ManuelOtto I want relative one :) – Jeremie Ges Oct 20 '17 at 02:33

0 Answers0