팀교육 : 이미지 갤러리

HTML

<div id="gallery">
 <p><img src="images/pic_m1.jpg" class="m1" id="imgBig" alt="" /></p>
    <ul>
     <li class="m1"><a href="#"><img src="images/pic_thumb1.jpg" alt="" /></a></li>
     <li class="m2"><a href="#"><img src="images/pic_thumb2.jpg" alt="" /></a></li>
     <li class="m3"><a href="#"><img src="images/pic_thumb3.jpg" alt="" /></a></li>
     <li class="m4"><a href="#"><img src="images/pic_thumb4.jpg" alt="" /></a></li>
     <li class="m5"><a href="#"><img src="images/pic_thumb5.jpg" alt="" /></a></li>
    </ul>
</div>

---

CSS

#gallery p {float:left; border:6px solid #333333; padding:5px}
#gallery ul {clear:both; padding:10px 0 0 0}
#gallery ul li {float:left; margin:0 4px 0 0; border:4px solid #333333}
#gallery ul li.on {border:4px solid #FF3300}

---

JQUERY

jQuery(function($){
 var imgThumb = $("#gallery ul li"); //썸네일 리스트를 변수로 저장
 $("#gallery ul li:eq(0)").addClass("on"); //리스트 중 첫번째에 on 클래스 부여
 //alert(thumbLength);
 function changeImg(){
  var imgNum = $(this).parent("li").attr("class"); //리스트의 클래스를 변수로 저장
  if($(this).parent("li").hasClass("on")){
   return // 클래스로 on을 갖고 있으면 반응하지 않게
  } else {
   $("#imgBig").attr("src","images/pic_" + imgNum + ".jpg"); //클래스 값을 가져와서 src값을 변경해준다
   imgThumb.removeClass("on"); //li의 on 클래스를 삭제하고
   $(this).parent("li").addClass("on"); //현재 클릭된 리스트에 on 부여
  }
 }
 imgThumb.find(">a").click(changeImg);
});

결과화면