jQuery-Plugin zu verrückten New York Times-Stil Schwebeflug zoomen?

Question

Ich frage mich, ob jemand weiß, überall von einem Code-Schnipsel, die Sie gezoomt Pfannen auf schweben tun können - für ein Beispiel siehe:

http://opinionator.blogs.nytimes.com/2010/12/09/visualizing-slavery/

Es gibt ein Bild von Abraham Lincoln die Emanzipations-Proklamation lesen , eingebaut in Flash, das genau das tut, was ich möchte.

Beachten Sie, dass ich bin nicht fragt nach letztlich ein "Lupe" Werkzeug wie Anything Zoomer (http://css-tricks.com/examples/AnythingZoomer/); Ich möchte, dass die gezoomte Komponente das nicht zoomte Bild ersetzt und die gleichen Abmessungen beibehält.

Ich würde dies als ein jQuery-Plugin bevorzugen, aber offen für alles.

Answer 1

hier ist ein Ausgangspunkt:

 $.fn.zoom = function() { 
     var w = this.width(); 
     var h = this.height(); 

     var zimg = $('<img>', { 
      'src': this.attr('src') 
     }).css({ 
      'position': 'absolute', 
      'left': 0, 
      'top': 0, 
      'opacity': 0 
     }) 

     var moveZone = $('<div>').css({ 
      'position': 'absolute', 
      'left': 0, 
      'top': 0, 
      'width': '100%', 
      'height': '100%' 
     }).hover(

     function() { 
      zimg.fadeTo(500, 1); 
     }, function() { 
      zimg.fadeTo(500, 0); 
     }).mousemove(

     function(ev) { 
      zimg.css({ 
       'left': (w - zimg.width())/w * ev.offsetX, 
       'top': (h - zimg.height())/h * ev.offsetY 
      }); 
     }); 

     this.wrap($('<div>').css({ 
      'overflow': 'hidden', 
      'position': 'relative', 
      'width': w, 
      'height': h 
     })).after(zimg, moveZone) 
    } 

demo

Answer 2

Gerade diese gefunden, etwas näher an, was ich will: MiniZoomPan - siehe: http://plugins.jquery.com/project/miniZoomPan

Danke trotzdem aber, Andy!