javascript/jquery로 축소판 사진 선택자

Question

아래 스크린 샷과 같은 것을 만들고 싶습니다. 맨 위에있는 큰 이미지가 기본 디스플레이가되고 맨 아래의 축소판을 클릭하면 상단의 큰 이미지가 축소판 이미지로 변경됩니다.

ps는 "맨위로 돌아 가기"텍스트를 무시합니다.

javascipt/jquery에서이 작업을 수행하는 쉬운 방법은 무엇입니까?

Answer 1

당신이 자바 스크립트 라이브러리와 비트를 실험하고자하는 경우,이

http://www.infoq.com/articles/emberjs

이 좀 걸릴 수 있습니다 귀하의 요구 사항의 대부분을 충족 할 수있는 샘플 응용 프로그램 (이다 귀하의 질문에). 사용자 정의 할 수 있어야하는 샘플 작업 코드가 있습니다.

Answer 2

이를 수행하는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은과 같이 하나 개의 이미지를 사용하는 것입니다 : 일부 JS/jQuery로

<img src="myimg.jpg" class="thumb" title="Click Me" /> 

<div id="view"><img /></div> 

는 다음을 수행 :

$(function(){ 
    $(document).on('click', '.thumb', swapImage); //wire up click event 
}); 

function swapImage() { 
    var thumb = $(this); 
    //steal src from thumb and pop it into main img 
    $('#view').find('img').attr('src', thumb.attr('src')); 
} 

것은 당신이 그것을 축소하기 위해 썸네일에 일부 CSS를 넣어 있는지 확인합니다, 그러나 #view 이미지를 전체 크기로 보자. 물론 이것은 이 아니라 가장 좋은 방법은이지만 정확한 방향으로 알려줄 수있는 한 가지 방법입니다.

두 번째 방법은 미리보기 이미지 용 이미지와 메인 이미지 용 이미지 두 개를 만드는 것입니다. 당신이 엄격한 명명 규칙을 준수하는 경우, 당신은 위의 코드를 사용하지만, 같은 swapImage() 기능에 뭔가를 할 수 :

//thumb and large image are named the same, 
    //except large has "large-" in front 
    $('#view').find('img').attr('src', 'large-' + thumb.attr('src')); 

행운을 빕니다!