표시 할 포트폴리오

Question

나는 동적이고 업데이트하기 쉬운 포트폴리오를 원합니다.

일부 미리보기가 약간있을 예정이며 미리보기를 마우스로 가리거나 클릭하면 전체 섹션이 업데이트됩니다.

저는 꽤 잘 알고 있습니다 : MM_swapImage(),하지만 jquery 나 ajax에서 해보고 싶습니다.

어떻게하면됩니까?

일부 연구 결과 : http://code.google.com/p/jquery-swapimage/

-

<SCRIPT LANGUAGE="Javascript"> 
function swap(pic1, pic2) 
{ 
var pic1 = document.getElementById("pic1"); 
var pic2 = document.getElementById("pic2"); 
var pic1src = pic1.src; 
var pic2src = pic2.src; 
pic2.src = pic1src; 
pic1.src = pic2src; 
} 
</SCRIPT> 

Answer 1

여기 내 코드의를

$('#imageswitch img').hover(
       function() { 
        var oldsource = $(this).attr('src'); 
        var foldername = oldsource.substr(0, oldsource.lastIndexOf('/')); 
        var filename = oldsource.replace(foldername+'/',''); 
        var newsource = foldername + '/' + 'hover_' + filename; 
        $(this).attr('src', newsource); 
        $(this).data('src', oldsource);     
       }, 
       function() { 
        $(this).attr('src', $(this).data('src')); 
       } 
      ); 

이미지 폴더를 만듭니다. image_1.jpg

큰 이미지라고 hover_image_1.jpg

(파일 이름 앞에 'hover_를'주의) 이미지를 통해

호버 그리고 그것의 대체 작은 이미지라고 소스를 새로운 소스 (큰 이미지)와 함께 사용하면 이미지를 마우스로두면 이전 소스가 복원됩니다.

Answer 2

빠르고 쉬운 해결책은 rel 태그의 큰 파일 이름을 저장하고, 큰 이미지의 소스를 교환하는 것을 사용하는 것 페이지에. 당신은 페이드 인과 페이드 아웃 효과를이를 확장 할 수 있지만, 여기에만 기본 제공합니다 : (그냥 예, 그것은 당신을 위해 일을 변경해야합니다)

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" /> 
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" /> 
<img class="preview" src="image01-hr.jpg" /> 

$(".thumbnail").click(function(e){ 
    $(".preview").attr("src", $(this).attr("rel")); 
});