Calculate how much bigger one image is from the other one.

Question

Some math calculations in JS problem solving

I am working on a zoom image functionality that creates a new div with a large image that is moved through x and y according to the mousemove on the image.

The large image should move a certain %, which is what i am trying to figure out. How much should it move by.

Here is some info:

• The small image is always the same size and its square. (it is actually always 221px X 221px)
• The large image varies (also always square, can be any size like 1000x1000)
• The view port of the zoomer is always the same.

I want to calculate how much smaller (or vice-versa ) the small image is from the the large.

This is in middle of a whole big script. I started writing the formula for the calculation: Again, All i want is to get the difference in percent converted into pixels step by step. First get the % then convert that into pixels.

    zoomObj.caluculateSizes = function(){
        $(zoomObj.largeImage).load(function(){
            // zoomObj.callingEvent is the small image
           zoomObj.smlImgSize = zoomObj.callingEvent.width()
           zoomObj.lrgImgSize = zoomObj.largeImage.width()

           // How do i go from here?
    })

js goes on.......

Answer 1

Unless I am mistaken this is more a mathematical question than a jQuery one. To get the percentage, divide one by the other and multiply by 100.

So, to get the with of the small image as a percentage of the width of the big image:

var smallImgWidthPercentage = parseFloat(zoomObj.callingEvent.width() / zoomObj.largeImage.width()) * 100;

Although, if your image is square, then you only need to work out one value.

Answer 2

This is just bit of simple math...

w - width of the small image
W - width of the big image
l - left position of the small image
L - left position of the big image

L = l + 1/2w - 1/2W

h - height of the small image
H - height of the big image
t - top position of the small image
T - top position of the big image

T = t + 1/2h - 1/2H

So assuming our image is:

<img style="width:221px; height:221px; position:absolute; left:600px; top:700px;" />

Answer:

Left = 600 + 1/2*221 - 1/2*1000 = 210 (rounded)
Top = 700 + 1/2*221 - 1/2*1000 = 310 (rounded)

<img style="width:1000px; height:1000px; position:absolute; left:210px; top:310px;" />

Using this calculation you can determine where you need to place big image/div to be centred in relation to the other object.

---

Edit: To put it all together, assuming bigImage is a CHILD of viewport, you need to use 0 as t and 0 as l.

Left = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)
Top = 0 + 1/2*221 - 1/2*1000 = -390 (rounded)

<div id="viewport" style="width:221px; height:221px;overflow:hidden;position:relative;">
    <img id="bigImage" style="width:1000px; height:1000px; position:absolute; left:-390px; top:-390px;" />
</div>

- as you see I used negative values, so bigImage will hide behind the viewport, and because.