jQuery 강좌4. 이미지 바꾸기

이번 강좌에서는 섬네일 이미지를 누르면 큰 이미지가 변환되도록 해보겠습니다.

1. 마크업 코드

<div id="wrap">

<div id="largeimg">

<a href="#"><img src="images/01.jpg" alt="이미지1"></a>

</div>

<div id="thumnail">

<ul>

<li><a href="images/01.jpg"><img src="images/01.jpg" alt="이미지1 섬네일" /></a></li>

<li><a href="images/02.jpg"><img src="images/02.jpg" alt="이미지2 섬네일" /></a></li>

<li><a href="images/03.jpg"><img src="images/03.jpg" alt="이미지3 섬네일" /></a></li>

<li><a href="images/04.jpg"><img src="images/04.jpg" alt="이미지4 섬네일" /></a></li>

</ul>

</div>

</div>

2. jQuery 코드

$(document).ready(function(){

$("#thumnail a").click(function(e) {

e.preventDefault();

var largeImgPath = $(this).attr("href");

var largeImgAlt = $(this).find("img").attr("alt").substr(0,4);

$("#largeimg img").attr({src:largeImgPath,alt:largeImgAlt});

});

});

먼저, e.preventDefault() 를 보도록 하지요. 이것은 무엇이냐 하면, 대상을 클릭했을때 발생하는 이벤트를 방지하는 것입니다. 즉, 링크가 걸려있는 Anchor 태그를 클릭하면 해당 주소로 페이지가 이동되지요? 그런데 우리는 해당 링크를 클릭하면 화면전환없이 이미지를 바꾸어야 하니, 페이지 이동 이벤트를 방지해야 합니다. 그래서 e.preventDefault()를 사용한것이지요.

이해가 잘 안되시면 e.preventDefault() 부분을 지우고 한번 해보세요. 무슨 내용인지 금방 알수 있습니다.

attr()메서드는 두가지 경우에 사용할수 있습니다. 먼저, 대상의 속성 값(value)을 알고 싶을때는 attr(Attribute) 처럼 사용합니다. 즉, 위의 예제에서 $(this).attr("href") 이 부분은 선택된 대상의 href 속성 값을 반환합니다.

두번째는 선택된 대상의 속성값을 변경할때 사용합니다. attr({Attribute:Value,Attribute1:Value1,....}); 이런식으로 속성을 설정할수 있지요.

위의 예제를 살펴보면, 처음에는 클릭된 대상의 href 속성의 값을 불러와서 큰 이미지의 src 의 값으로 대체하였습니다. 그러면 큰이미지가 바뀌겠지요?

alt값도 변경하였는데, 이부분은 여러분이 연구해 보시기 바랍니다.

질문이나 기타 피드백 언제나 환영해요~

 

from. http://webnoon.net/entry/jQuery-강좌4-이미지-바꾸기