Javascript/jQuery image zoom plugin

Question

J'ai besoin d'afficher une image dans un div de taille fixe. Sous le div doit être un certain contrôle, comme une barre de curseur, qui définit la résolution de l'image affichée. Cela ne me dérange pas beaucoup d'écrire la chose, mais je pensais que cela pourrait déjà exister. Comment se fait-il que je ne puisse pas trouver une telle chose?

(Je ne suis pas intéressé par des choses comme jQZoom ni ZoomImage qui ne laissez pas l'utilisateur de choisir dynamiquement la résolution d'affichage.)

Answer 1

Cette question a été vu plus de 1k fois, je joins ma solution. N'hésitez pas à copier et adapter.

La solution implique le plugin de curseur jQuery UI. Principalement, nous créons une div avec une taille fixe, overflow: scroll, contenant une balise img, et nous ajoutons un curseur en dessous. L'événement du curseur 'change' est lié à une mise à l'échelle des attributs img @ width/@ height.

Voici un extrait de ce que nous avons fait:

HTML

<div id="pictureFilePreview"> 
     <img id="pictureFilePreviewImg" src="style/images/spacer.gif"/> 
    </div> 
    <div id="pictureSlider"/> 

JS

$('#pictureFilePreview').css('overflow','scroll'); 
$('#pictureFilePreviewImg') 
    .attr("src", "http://url.of.the.image") 
    .css("display","block") 
    .bind("load", function(){ //wait for complete load of the image 
     // Slider 
     var initHeight = parseInt($('#pictureFilePreviewImg').attr("height")); 
     var initWidth = parseInt($('#pictureFilePreviewImg').attr("width")); 
     if ($('#pictureFilePreview').width() < initWidth 
      || $('#pictureFilePreview').height() < initHeight) {     

      var deltaW = $('#pictureFilePreview').width() - initWidth; 
      var deltaH = $('#pictureFilePreview').height() - initHeight; 
      var ratio = 0; 
      if (deltaW < deltaH) { 
       ratio = ($('#pictureFilePreview').width()/initWidth) * 100; 
      } else { 
       ratio = ($('#pictureFilePreview').height()/initHeight) * 100; 
      } 
      $('#pictureSlider').slider({ 
       range: false, 
       min : ratio, 
       values: [100], 
       change: function(event, ui) { 
        var newHeight = ((initHeight) * ui.value/100); 
        var newWidth = ((initWidth) * ui.value/100); 
        $('#pictureFilePreviewImg').attr("height",newHeight); 
        $('#pictureFilePreviewImg').attr("width",newWidth); 
        $('#pictureFilePreview').css('overflow',ui.value === 0?'visible':'scroll'); 
       } 
      }); 
     } 
    }); 

Answer 2

Je ne sais pas si cela vaut la peine de l'effort pour vous, mais il y a des bibliothèques formidables que faites exactement cela au Cappuccino. La procédure pas à pas de tutoriel vous montre comment construire une application qui effectue un zoom avant et tourne les images:

Scrapbook tutorial