Redimensionner et zoomer une image

Question

J'ai vu cette question et je l'ai trouvé utile, mais j'ai essayé d'en faire plus avec le code pour appliquer les boutons de zoom et je n'arrive pas à le faire fonctionner correctement.Je suis nouveau sur javascript et jquery et j'ai du mal à comprendre comment le mot-clé "this" est appliqué.

$('#plus').click(
function( event ){
    var scale = 150/100;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

$('#minus').click(
function( event ){
    var scale = 100/150;
    var pos = $('#Container img').offset();
    var clickX = event.pageX - pos.left;
    var clickY = event.pageY - pos.top;
    var container = $('#Container img').parent().get(0);

    $('#Container img').css({
        width: this.width*scale, 
        height: this.height*scale
    });

    container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
    container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);

J'ai fait un jsfiddle pour faire une démonstration de mon code.

Answer 1

this fait référence à l'élément cliqué (en fait, vous devriez probablement utiliser $(this) dans jQuery), car la fonction appelée après le clic obtient cette portée.Donc dans votre exemple, this fait référence au bouton plus ou au bouton moins, vous effectuez donc techniquement une mise à l'échelle leur largeur/hauteur et appliquer la largeur/hauteur résultante à l’image.

Une chose courante pour éviter d'avoir à déboguer quoi this représenter est de l'attribuer à une variable tout en haut de la fonction, par exemple :

var self = this;

ou

var $myClickedButton = this;

Faites également attention au style :

• element.width fait référence à l'attribut width d'un élément (comme <img width="300" />, similaire à celui de jQuery $(element).attr('width')), mais
• element.style.width fait référence à sa largeur CSS (comme <img style="width: 300px;" />, ou <img class="myClassWithDenotedWidth" />, similaire à celui de jQuery $(element).css('width')).Ce dernier a également une unité, vous devez donc l'analyser pour obtenir uniquement la valeur numérique.

Je l'ai corrigé pour votre bouton plus, vous pouvez suivre le même principe pour le moins.Voici ce que j'ai fait :

    var $image = $('#Container img');
    var container = $image.parent().get(0);

    $('#Container img').css({
        width: Math.round(parseInt($image.css('width'), 10) * scale), 
        height: Math.round(parseInt($image.css('height'), 10) * scale)
    });

A voir ici : http://jsfiddle.net/shomz/4A9Gt/4/ (a également ajouté une transition CSS pour rendre les zooms moins saccadés)