jQuery 이미지 갤러리 만들기
jQuery를 사용하여 이미지 갤러리를 만드는 방법을 자세히 설명하겠습니다. 이 갤러리는 썸네일 이미지를 클릭하면 큰 이미지가 표시되도록 설정할 수 있습니다. 이를 통해 사용자에게 더 나은 시각적 경험을 제공할 수 있습니다.
HTML 설정
우선, 이미지 갤러리를 구성할 기본 HTML 구조를 만듭니다. 여기서는 이미지 썸네일과 큰 이미지를 표시할 영역을 준비합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 갤러리 (Image Gallery)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
}
#gallery img {
margin: 5px;
cursor: pointer;
}
#largeImage {
display: block;
margin-top: 20px;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>이미지 갤러리 (Image Gallery)</h1>
<div id="gallery">
<img src="thumbnail1.jpg" data-large="large1.jpg" alt="Image 1">
<img src="thumbnail2.jpg" data-large="large2.jpg" alt="Image 2">
<img src="thumbnail3.jpg" data-large="large3.jpg" alt="Image 3">
</div>
<img id="largeImage" src="large1.jpg" alt="Large Image">
<script src="script.js"></script>
</body>
</html>
CSS 설정
갤러리의 스타일을 설정하여 썸네일 이미지가 적절하게 배치되도록 하고, 큰 이미지는 페이지 상단에 위치하도록 설정합니다. 위의 HTML 코드에 포함된 <style> 태그를 참고합니다.
jQuery 스크립트 작성
이제 jQuery를 사용하여 썸네일 이미지를 클릭했을 때 큰 이미지를 표시하는 스크립트를 작성합니다.
$(document).ready(function(){
$("#gallery img").click(function(){
let largeImagePath = $(this).data("large");
$("#largeImage").attr("src", largeImagePath);
});
});
이 스크립트는 #gallery 내의 모든 이미지에 클릭 이벤트를 바인딩합니다. 썸네일 이미지를 클릭하면 해당 이미지의 data-large 속성에 저장된 큰 이미지 경로를 가져와 #largeImage 요소의 src 속성을 변경합니다.
HTML 파일에 스크립트 포함
위의 jQuery 스크립트를 외부 파일로 작성하고 HTML 파일에 포함시킵니다. 예를 들어, script.js 파일을 만들고 그 안에 위의 jQuery 코드를 작성한 후 HTML 파일의 <script src="script.js"></script> 태그를 통해 포함시킵니다.
확장 기능
페이드 인/아웃 효과 추가
이미지가 전환될 때 부드러운 페이드 효과를 추가하여 사용자 경험을 향상시킬 수 있습니다.
$(document).ready(function(){
$("#gallery img").click(function(){
let largeImagePath = $(this).data("large");
$("#largeImage").fadeOut(500, function(){
$(this).attr("src", largeImagePath).fadeIn(500);
});
});
});
이 코드에서는 큰 이미지가 페이드 아웃된 후 새로운 이미지로 변경되고, 다시 페이드 인됩니다. 이를 통해 이미지 전환이 더 부드럽게 이루어집니다.
결과
이제 완성된 jQuery 이미지 갤러리를 실행해 보면, 썸네일 이미지를 클릭할 때 큰 이미지가 바뀌는 것을 볼 수 있습니다. 추가로 페이드 인/아웃 효과를 통해 전환이 부드럽게 이루어집니다.
이처럼 jQuery를 사용하여 간단하면서도 강력한 이미지 갤러리를 구현할 수 있습니다. 이를 통해 웹 페이지의 시각적 매력을 높이고 사용자 경험을 향상시킬 수 있습니다.