放大縮小到多張照片

Question

我想在單擊原始照片時進行照片縮放。
我已經使用下面的代碼。
我很好，當我點擊照片，然後縮放圖像出現。
但作爲我的程序要求，我的網頁有多張照片。
所以，當我點擊第一張照片，然後這張照片變大。
然後我需要再次點擊這張照片，以便這張照片變得正常。
這是我的程序代碼流。

假設用戶忘記點擊當前的放大照片，以便它再次成爲正常大小。
假設它仍然放大。
然後用戶點擊另一張照片進行縮放。
此時，用戶想要放大的照片不會放大。
由於第一張照片仍然放大。

這是我的問題。

所以

1）我怎麼會知道，當用戶點擊另一張照片進行縮放照片的一個仍然放大。
2）如果jQuery代碼可以知道這種情況，請讓我知道它。
3）那麼如果jquery可以知道這種情況，我怎麼能刪除當前放大的照片，用戶忘記點擊，以使正常大小再次。
4）我應該做什麼代碼添加到我當前的jquery代碼中，請讓我知道它。

<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="jquery.quickZoom.1.0.js"></script> 
<script tyle="text/javascript">  
     $(document).ready(function() {   
      $('.OrignialImage').quickZoom({ 
       zoom: 4, 
       speedIn: 500, 
       speedOut: 200, 
       easeIn:'easeOutBack', 
       titleInSpeed: 200  
      });    

     }); 
</script> 

..................

.OrignialImage{width:150px; height:150px;} 
.HtmlTableHeight{width: 160px; height: 160px;} 
.quickZoom-hoverShadow {-moz-box-shadow:0 0 10px 0 #000; 
-webkit-box-shadow:0 0 10px 0 #000; 
box-shadow:0 0 10px 0 #000;} 

................. 。

<table border="1" height="1000px" cellpadding="0" cellspacing="0"> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003_2.jpg" alt="title" class="OrignialImage" /></td></tr> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003_4.jpg" alt="title" class="OrignialImage" /></td></tr> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003.jpg" alt="title" class="OrignialImage" /></td></tr> 
     <tr class="HtmlTableHeight" ><td><img src="images/C003_3.jpg" alt="title" class="OrignialImage" /></td></tr> 
    </table> 

..................

/* 
* quickZoom 0.1.0 - JavaScript Image viewer 
* Copyright (c) 2011 Louis Sawtell, contact@louis-sawtell.com, http://louis-sawtell.com 
* 
* I make modify his coding as my requirement. 
*/ 

(function($) { 
$.fn.quickZoom = function(options) { 
    var thumbX, thumbY; 
    var IsFinishedFirstClick = false; 

    // define default values 
    var defaults = {    
     shadow: true 
    }; 
    // merge the defaults with given parameters 
    var e = $.extend(defaults, options); 
    // set $(this) to var to speed up code 
    var myThis = $(this); 

    var OriginalPictureTop = 0; 
    var OriginalPictureLeft = 0; 
    myThis.click(function(){ 

     if(IsFinishedFirstClick != true) 
     { 
      // this code for first time click to image.        
      // assign vars to avoid overusing $(this) 
      var target = $(this); 

      OriginalPictureTop = target.offset().top; 
      OriginalPictureLeft = target.offset().left; 

      // get thumbnail dimensions 
      thumbX = target.width(); 
      thumbY = target.height(); 

      // get zoomed dimensions 
      var zoomX = thumbX*e.zoom; 
      var zoomY = thumbY*e.zoom; 

      // If the thumbnail doesn't represent the image aspect ratio.. 
      if (e.sqThumb) { 
       // create img var to gather full size dimensions 
       var img = new Image(); 
       img.src = target.attr("src"); 

       // get aspect ratio 
       var ratio = img.height/img.width; 
       // apply ratio 
       zoomY = zoomY*ratio; 
      } 

      // this is the offset for the title 
      var marginX = (zoomX-thumbX)/2; 
      var marginY = (zoomY-thumbY)/2; 

      // add z-index and optional shadow 
      if (e.shadow) {target.addClass('quickZoom-hoverShadow');} 
      target.css({'z-index':10}); 

      target.css({ 
       position: "fixed", 
       top:10+"px", 
       left:200+"px",     
      })      
      target.stop(true, false).animate({    
       width:zoomX+'px', 
       height:zoomY+'px',    
      }, { 
       // This place for even which fire after animate.      
      }); 
      IsFinishedFirstClick = true; 
     } 
     else 
     { 
      //this code for second click.        
      var target = $(this); 

      target.css({  
       position:"absolute", 
       top:OriginalPictureTop+"px", 
       left:OriginalPictureLeft+"px",     
      }) 
      target.stop(true, false).animate({     
       width: thumbX+'px', 
       height: thumbY+'px',      
      }, { 
       duration: e.speedOut, 
       easing: e.easeOut, 
       complete: function() { 
        target.css({'z-index':1}); 
       } 
      }); 

      target.removeClass('quickZoom-hoverShadow'); 
      target.css({'z-index':2}); 

      IsFinishedFirstClick = false; 
      OriginalPictureTop = 0; 
      OriginalPictureLeft = 0;     
     } 
    });  
    } 
})(jQuery); 

Answer 1

聲明其設置一個全局變量，當你運行你的變焦FUNC然後在用戶手動縮小變焦時清除。這樣，您可以在用戶單擊縮放時查看用戶是否無法手動縮小來進行檢查。

道歉，我沒有機會檢查這個（目前在我的午餐），但希望你能得到我所說的要點。

var zoomState; // Outside of the function to declare globally. 

    $(document).ready(function() {   
     $('.OrignialImage').click(function() { 

     if (zoomState != null) { 
      // Auto decrease zoom. 

     } else { 

      $('.OriginalImage').quickZoom({ 
      zoom: 4, 
      speedIn: 500, 
      speedOut: 200, 
      easeIn:'easeOutBack', 
      titleInSpeed: 200  
     }); 

      zoomState = $(this); // Set zoomState. 
     } // end if  
     });  

    });