CODEWITHSUNDEEP
javascriptjqueryhtml
Roque Mejos
Roque Mejos

Reputation: 457

zoom image to the center jquery or javascript

if i zoom the image it will going to the right. here is my js function below. the moment i zoom the image the background actual width and height is constant only the background size should be dynamic. that's the reason why it looks like if it zoom it will going to the right not in the center. what i want is when i zoom the image it zoom it forward to the center of the image.

function zooms(zoomType) {  
    switch(zoomType) {
        case '+':
            newW += 10;
            break;
        case '-':
            newW -= 10;
            break
    }

    if(newW <= 0) {
        newW = 0;
    } else {
        if(newW >= 100) {
            newW = 100;
        }
    }
    return newW;
}

function backgroundAdjust(num, el) {        
    wid = (parseInt(num)+parseInt(el.width()));
    el.css({
        'background-size': wid + 'px auto'
    });
    return;
}

$('input.zoomButton').click(function() {
    zoomType = $(this).val();
    zoomNum = zooms(zoomType);
    backgroundAdjust(zoomNum, $('#uploadImage'));
});

Upvotes: 2

Views: 1001

Answers (2)

Seema Rawal
Seema Rawal

Reputation: 247

What worked for me was scrolling the container element by half the value of same amount you are increasing the width and height of the image. For this you can use scrollBy. Eg. if your container element is el and the image inside is img. Now to zoom-in if you are increasing the width and height by 10% of the current 'x' px and height by 'y' px, Your zoom-in function would look like below: 

function zoomIn() {
  let imgWidth = img.width.replace(/px/g,"");  // removing 'px'
  let imgHeight = img.height.replace(/px/g,"");  // removing 'px'
  let x = imgWidth + (imgWidth*0.1);
  let y = imgHeight + (imgHeight*0.1);
  el.scrollBy(x/2, y/2);
}

Upvotes: 0

solendil
solendil

Reputation: 8468

This should work if your image is square : it offsets the background image so its center remains at the center of the containing element. 

var posx = (el.width()-wid)/2;
var posy = (el.height()-wid)/2;
el.css({
        'background-size': wid + 'px auto',
        'background-position': posx +'px ' +posy +'px'
    });

Upvotes: 1

Related Questions