728x90
반응형
단순한 이미지 갤러리를 만드는 방법입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. HTML
<div class="gallery">
<ul class="thumb">
<li><a href="http://spring.jpg"><img src="http://spring.jpg" alt="봄" /></a></li>
<li><a href="http://summer.jpg"><img src="http://summer.jpg" alt="여름" /></a></li>
<li><a href="http://autumn.jpg"><img src="http://autumn.jpg" alt="가을" /></a></li>
<li><a href="http://winter.jpg"><img src="http://winter.jpg" alt="겨울" /></a></li>
</ul>
<div class="main">
<img src="http://spring.jpg" alt="봄" />
</div>
</div>
3. CSS
* { margin: 0; padding: 0; }
.gallery { width: 100%; max-width: 600px; margin: 0 auto; }
.thumb { width: 100%; margin-bottom: 3px; list-style: none; overflow: hidden; }
.thumb li { width: 25%; float: left; text-align: center; }
.thumb li img { width: 98%; }
.main { width: 100%; text-align: center; }
.main img { width: 99.5%; }
4. jQuery
<script type="text/javascript">
$(document).ready(function(){
$(".thumb a").click(function(){
$(".main img").attr("src", $(this).attr("href"))
.attr("alt", $(this).children("img").attr("alt"));
return false;
});
});
</script>
728x90
