jqzoom在多個圖像上

我有一個主圖像和多個縮略圖的標準設置，可以對其進行調整以更改主圖像。我在主圖像上使用jqzoom，但遇到了主圖像變化和縮放圖像變得空白的常見問題。通過堆棧溢出來看，我發現了一些聲稱糾正這種錯誤的代碼，並且以某種方式解決了這個問題。但不是讓每個更改的圖像都具有縮放功能，而是讓主圖像僅作爲大版本的鏈接，繞過jqzoom函數調用。jqzoom在多個圖像上

，以顯示兩個例子：與標準jqzoom代碼和縮略圖不顯示變焦： http://designerspider.net/clients/jge/project2.php?id=17

與添加的代碼和圖像剛剛成爲鏈接： http://designerspider.net/clients/jge/project.php?id=17

我添加的代碼被

$(".thumbs a").click(function(){

 $(".jqclass").unbind(); 

     $(".jqclass").jqzoom(options); 

     return false; 
    };

如果有人能看到我是否錯過了任何東西，或者需要以不同的方式做，我會很感激任何和所有的建議。我不明白爲什麼添加額外的功能會禁用主jqzoom功能：/

來源

2011-03-14 Paul Savage

您可能會發現，因爲您並排使用了兩個功能，一個用於更改圖像，另一個用於取消綁定縮放功能，然後重新綁定它，第二個功能在圖像更改之前完成。所以當圖像改變時，它仍然不起作用。

第二個問題，你實際上並沒有解開任何東西。

所以，儘量首次改變到：

$(".jqclass").unbind(".jqclass");

或者你可以多一點遷移到jQuery的。我測試了這一點：

你的HTML應該是這樣的：

<div class="projectphotos"> 
    <div id="photo_1"> 
     <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass"> 
      <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" /> 
     </a> 
    </div> 
    <div id="photo_2" style="display:none;"> 
     <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg"> 
      <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" /> 
     </a> 
    </div>          
    <div class="thumbsdiv"> 
     <ul class="thumbs"> 
      <li> 
       <img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" /> 
      </li> 
      <li> 
       <img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" /> 
      </li> 
     </ul> 
    </div> 
</div>

和你的jQuery這樣的，我已經解釋每一行：

var options = { 
    zoomWidth: 250, 
    zoomHeight: 250, 
    position: 'right', 
    yOffset: 0, 
    xOffset: 0, 
    title: false 
} 
$(".jqclass").jqzoom(options); 

// Make the thumbnail look clickable: 
$(".thumbs img").each(function() { 
    $(this).css('cursor', 'pointer'); 
}); 
// React to clicking on a thumbnail: 
$(".thumbs img").click(function() { 
    // Get the photo linked to: 
    var photo = $(this).attr('rel'); 
    // Unbind the zoom: 
    $(".jqclass").unbind(".jqclass"); 
    // Hide the current image via its parent DIV: 
    $(".jqclass").parent().hide(); 
    // Remove teh jqclass: 
    $(".jqclass").removeClass("jqclass"); 
    // Show the clicked photo: 
    $("#"+photo).show(); 
    // Add the class and the zoom: 
    $("#"+photo+" a").addClass("jqclass").jqzoom(options); 
});

來源

2011-03-15 00:25:44 Scoobler

這幾乎是解決方案的一個亮點！看代碼是有道理的，所以感謝讓它理解:)小的事情是，在第一個圖像之後的所有圖像上，第二個幽靈縮放窗口顯示沒有任何內容，它看起來像它來自擁有「.jqclass」）。jqzoom（選項）部分調用兩次。當我把它的第一個實例，然後空白縮放窗口消失（雖然自然，最初的mainimage沒有縮放，直到你交換圖像）。 – 2011-03-15 14:49:46

會不會有一些方法給$（「.jqclass」）添加onLoad命令。線？所以它只在第一次加載頁面時運行，之後它將使用點擊函數中的行。 – 2011-03-15 14:51:26

ok，通過將第一個圖像命名爲jqclassorig對其進行排序。之後，每個縮略圖點擊調用jqclass，所以沒有重複的calass，沒有額外的縮放框:) – 2011-03-16 01:48:53

這是你如何清洗從jQZoom數據：

$('.jqclass').removeData('jqzoom');

由於jQZoom保存對象數據的方式如下：

$(el).data("jqzoom", obj);

來源

2013-03-14 15:28:10

jqzoom在多個圖像上

回答

相關問題