여러 이미지에 jqzoom

Question

주 이미지를 변경하기 위해 하나의 주 이미지와 여러 축소판을 붙일 수 있습니다. 주 이미지에 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 기능이 비활성화되는 이유를 이해할 수 없습니다./

Answer 1

두 기능을 나란히 사용하고 하나는 이미지를 변경하고 다른 하나는 줌 기능을 언 바인드하기 때문에, 다시 리 바인드하면 이미지가 변경되기 전에 두 번째 기능이 완료됩니다. 따라서 이미지가 변경되면 여전히 작동하지 않습니다.

두 번째 문제는 실제로 아무 것도 바인딩 해제하지 않은 것입니다.

그래서,로 변경 먼저 시도 :

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

이 또는 당신이 jQuery를에 좀 더 마이그레이션 할 수 있습니다.

<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를 이렇게, 나는 각 라인 설명했습니다 :

당신 HTML은 다음과 같을 것이다 :

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); 
}); 

Answer 2

이 당신이 청소하는 방법입니다 나는 이것을 테스트 한 jQZoom 데이터 :

01 : jQZoom 오브젝트 데이터를 다음과 같은 방법을 절약 할 수 있기 때문에

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

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