티스토리 뷰

 

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

 

실무에서 쓰는 마크업 - webstoryboy

 

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



Result

jQuery

jQuery(document).ready(function(e) {         /*  제이쿼리 문서 선언 */
	$("#thumbImg a").click(function(){	/* 작은 이미지를 클릭 했을 때 동작 설정  */
		var path = $(this).attr("href");           /* 변수 설정 : attr 속성을 이용해 href 첨부 */
		$("#largeImg > img").attr({ src: path });        /*  큰 이미지 속성에 path 변수 첨부 */
		return false;
	 });
 });

html

<div id="gallery"> <div class="largeImg"> /* 큰 이미지 설정 */ <img src="큰이미지주소" /> </div> <div class="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; }




 

 

 

 









저작자 표시
신고
댓글
댓글쓰기 폼