본문 바로가기
웹 퍼블리셔

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

 

 

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

 

실무에서 쓰는 마크업 - webstoryboy

 

썸네일 이미지를 클릭하면 자막을 보여주는 갤러리입니다.



sample

jQuery

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(e) {
	$("#thumbImg li span").hide();
	$("#thumbImg li a").click(function(){
		$("#caption").remove();
		var path = $(this).attr("href");
		$("#largeImg > img").attr({ src: path });
		var msg = $(this).next("span").text();
		
		$("#largeImg").append("<div id ='caption'></div>");
		$("#caption").text(msg);
		var posy = $("#caption").height()+20;
		$("#caption").animate({top:"-="+posy+"px"},300)
		return false;
	});
 });
</script>

html

<div id="gallery"> <div id="largeImg"> <img src="큰이미지" alt="큰이미지1" /> </div> <div id="thumbImg"> <ul> <li> <a href="큰이미지"><img src="작은이미지" alt="작은이미지1"/></a> <span>제주도 아쿠리아움에서1</span> </li> <li> <a href="큰이미지"><img src="작은이미지" alt="작은이미지2"/></a> <span>제주도 아쿠리아움에서2</span> </li> <li> <a href="큰이미지"><img src="작은이미지" alt="작은이미지3"/></a> <span>제주도 아쿠리아움에서3</span> </li> <li> <a href="큰이미지"><img src="작은이미지" alt="작은이미지4"/></a> <span>제주도 아쿠리아움에서4</span> </li> <li> <a href="큰이미지"><img src="작은이미지" alt="작은이미지5"/></a> <span>제주도 아쿠리아움에서5</span> </li> </ul> </div> </div>

CSS

#gallery {
	width:600px;	
}
#largeImg {
	width:600px;
	height:380px;	
	overflow:hidden;
	margin-bottom:10px;
}
#thumbImg li {
	display:inline;
	margin-right:3px;
}
#thumbImg li sapn {
	text-align:left;	
}
#caption { 
	background:url(투명배경 이미지주소.png) ; 
	padding:10px;
	position:relative;
	color:#FFFFFF; 
	text-align:left;
	width:600px;
}