jQuery的 - 運行功能的新形象

Question

上我是一個jQuery新手，所以這個問題的答案可能很簡單：

我有一個形象，我願做幾件事情吧。 當用戶點擊「縮放」圖標時，我正在運行'imagetool'插件（http://code.google.com/p/jquery-imagetool/）以加載更大版本的圖像。該插件在圖像周圍創建一個新的div，並允許用戶平移。

當用戶點擊一個替代圖像上，我卸下在新的舊的和負載。

，當用戶點擊一個替代圖像，然後點擊縮放按鈕問題就來了 - 該插件ImageTool的創建新的div，之後卻出現圖像...

的代碼如下：

// Product Zoom (jQuery) 
$(document).ready(function(){ 
$("#productZoom").click(function() { 

    // Set new image src 
    var imageSrc = $("#productZoom").attr("href"); 
    $("#productImage").attr('src', imageSrc); 

    // Run the imagetool plugin on the image 
    $(function() { 
     $("#productImage").imagetool({ 
      viewportWidth: 300, 
      viewportHeight: 300, 
      topX: 150, 
      topY: 150, 
      bottomX: 450, 
      bottomY: 450 
     }); 
    }); 
    return false; 
}); 
}); 


// Alternative product photos (jQuery) 
$(document).ready(function(){ 
$(".altPhoto").click(function() { 

    $('#productImageDiv div.viewport').remove(); 
    $('#productImage').remove(); 

    // Set new image src 
    var altImageSrc = $(this).attr("href"); 

    $("#productZoom").attr('href', altImageSrc); 

    var img = new Image(); 
    $(img).load(function() { 
     $(this).hide(); 
     $('#productImageDiv').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr({ 
     src: altImageSrc, 
     id: "productImage" 
     }); 

    return false;  
}); 
}); 

在我看來，該插件ImageTool的不能再看到#productImage形象一旦被替換成一個新的形象。所以我覺得這事做結合？由於在頁面加載後新圖像被添加到dom中，iamgetool插件不能再正確使用它了......是嗎？ 如果是這樣，任何想法如何處理？

Answer 1

Wehey的嘛！我已經整理出來自己...

事實證明，如果我完全刪除包含分區，然後以.html改寫它的ImageTool的插件重新認識它。

對於任何修訂代碼誰的興趣：

$(document).ready(function(){ 

    // Product Zoom (jQuery) 
    $("#productZoom").click(function() { 

    $('#productImage').remove(); 
    $('#productImageDiv').html('<img src="" id="productImage">'); 

    // Set new image src 
    var imageSrc = $("#productZoom").attr("href"); 
    $("#productImage").attr('src', imageSrc); 

    // Run the imagetool plugin on the image 
    $(function() { 
     $("#productImage").imagetool({ 
      viewportWidth: 300, 
      viewportHeight: 300, 
      topX: 150, 
      topY: 150, 
      bottomX: 450, 
      bottomY: 450 
     }); 
    }); 

    return false; 
    }); 


    // Alternative product photos (jQuery) 
    $(".altPhoto").click(function() { 

    $('#productImageDiv div.viewport').remove(); 
    $('#productImage').remove(); 

    // Set new image src 
    var altImageSrc = $(this).attr("href"); 

    // Set new image Zoom link (from the ID... is that messy?) 
    var altZoomLink = $(this).attr("id"); 

    $("#productZoom").attr('href', altZoomLink); 

    var img = new Image(); 
    $(img).load(function() { 
     $(this).hide(); 
     $('#productImageDiv').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr({ 
     src: altImageSrc, 
     id: "productImage" 
     }); 

    return false;  
    }); 
}); 

Answer 2

您可以嘗試將productZoom.click（）函數抽象爲命名函數，然後在更改爲替代圖像後重新綁定它。例如：

// Product Zoom (jQuery) 
$(document).ready(function(){ 
$("#productZoom").click(bindZoom); 

// Alternative product photos (jQuery) 
$(".altPhoto").click(function() { 

     $('#productImageDiv div.viewport').remove(); 
     $('#productImage').remove(); 

     // Set new image src 
     var altImageSrc = $(this).attr("href"); 

     $("#productZoom").attr('href', altImageSrc); 

     var img = new Image(); 
    $(img).load(function() { 
       $(this).hide(); 
     $('#productImageDiv').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr({ 
       src: altImageSrc, 
       id: "productImage" 
       }); 
     $("#productZoom").click(bindZoom); 
     return false; 

}); 
}); 

function bindZoom() { 
     // Set new image src 
     var imageSrc = $("#productZoom").attr("href"); 
     $("#productImage").attr('src', imageSrc);  

     // Run the imagetool plugin on the image 
     $(function() { 
       $("#productImage").imagetool({ 
         viewportWidth: 300, 
         viewportHeight: 300, 
         topX: 150, 
         topY: 150, 
         bottomX: 450, 
         bottomY: 450 
       }); 
     }); 
     return false; 
} 

此外，將您的ready（）塊同時滾動到同一個塊中。

Answer 3

首先，我有一個問題，是.altPhoto鏈接或圖片？因爲如果它的圖像那麼這行是錯誤的

var altImageSrc = $(this).attr("href"); 

應該

var altImageSrc = $(this).attr("src"); 

它我能找到一目瞭然