본문 바로가기
웹 퍼블리셔

[Tutorial][Gallery] 클릭하면 변하는 이미지 슬라이드2

 

 

[Gallery] 클릭하면 변하는 이미지 슬라이드

 

실무에서 쓰는 마크업 - webstoryboy

 

썸네일 이미지를 클릭하면 이미지가 효과를 내면서 바뀌는 갤러리입니다.



Rseult

jQuery

jQuery(document).ready(function(e) {        /* 제이쿼리 선언 */
	$("#thumbImg a").click(function(){	         /* 작은 이미지를 클릭 했을 때 동작 설정  */
		var path = $(this).attr("href");            /* 변수 설정 : attr 속성을 이용해 href 첨부 */
		$("#largeImg > img").attr({ src: path });        /*  큰 이미지 속성에 path 변수 첨부 */
                $("#largeImg > img").css("opacity","0").stop().animate({opacity:1},1000);
                 /*  투명도를 설정한 애니메이션을 추가 1000는 애니메이션 시간 */
		return false;
	 });
 });

html

<div id="gallery"> <div id="largeImg"> /* 큰 이미지 설정 */ <img src="큰이미지주소" /> </div> <div id="thumbImg"> /* 작은 이미지 설정 */ <a href="큰이미지주소"><img src="작은 이미지1" alt=""/></a> <a href="큰이미지주소"><img src="작은 이미지2" alt="" /></a> <a href="큰이미지주소"><img src="작은 이미지3" alt="" /></a> <a href="큰이미지주소"><img src="작은 이미지4" alt="" /></a> <a href="큰이미지주소"><img src="작은 이미지5" alt="" /></a> </div> </div>

CSS

#gallery {
	min-width:610px;	
}
#largeImg { 
	height:390px; 
	text-align:left;
	width:100%;
}
#thumbImg {
	text-align:left;
}
#thumbImg a { 
	text-align:left; 
	display:inline; 
	margin-right:5px;
}