JQuery Hover Swap 이미지 - 원래 이미지로 돌아 가기

Question

저는 몇 개의 JQuery 튜토리얼을 가져 와서 축소판 호버 스왑 이미지 기능을 연구했습니다. 결국 나는 이것을 내 고객 사이트에 통합 할 수 있었고 작동 중입니다! 그러나 내가 가져 가면 주 이미지가 원래 이미지로 돌아 가지 않습니다. 다음은이 단지 노력 페이지의

내 주요 이미지 ID를 사용

function myFunction(){ 
    jQuery('#thumbs img').hover(function(){ 
     jQuery('#largeImage').attr('src',jQuery(this).attr('src').replace('thumb','large')); 
    }); 
} 

jQuery(document).ready(function(){ 
    jQuery(myFunction); 
}); 

= largeImage

내 섬네일 ID로 사업부에 싸여있다

= 엄지 손가락

:

여기 내 jQuery의 원본 이미지로 돌아가는 것 외에도 괜찮습니다. http://test.pillarsoflifebook.com/tables/tabletops/wood/solid-plank-oak/solid-plank-oak/

통합 방법을 생각할 수 없습니다. .hover의 mouseout 콜백 함수. 나는 변수에 largeimg src를 설정하고 그것을 mouseout 함수로 대체 할 것을 생각하고 있었다.

모든 조언을 크게 듣습니다! 감사!

Answer 1

내가 그 방법을 사용하지 말라고 권합니다

function myFunction() { 
    var $large = jQuery('#largeImage'); 

    //store the default image as the data src 
    $large.data('src', $large.attr('src')); 

    var src = jQuery('#largeImage').attr('src'); 
    jQuery('#thumbs img').hover(function() { 
     $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large')); 
    }, function() { 
     //on mouse leave put back the original value 
     $large.attr('src', $large.data('src')); 
    }); 
} 

jQuery(document).ready(function() { 
    jQuery(myFunction); 
}); 

---

또 다른 방법

function myFunction() { 
    var $large = jQuery('#largeImage'); 
    //you can also use a closure variable, if you don't want to change the default image in the same page you can use this one. 
    //but if you want to change the default image using a function it won't work, in the first approach along with the src attribute if you change the data src that will work 
    var src = $large.attr('src'); 
    jQuery('#thumbs img').hover(function() { 
     $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large')); 
    }, function() { 
     $large.attr('src', src); 
    }); 
} 

jQuery(document).ready(function() { 
    jQuery(myFunction); 
});