[jQuery] 이전/다음 작품이 보이는 갤러리 만들기

작성일자 글쓴이
[jQuery] 이전/다음 작품이 보이는 슬라이드 갤러리

갤러리 또는 이미지 리스트에서 이전 이미지와 다음 이미지가 살짝 보이는 갤러리를 구성하기 위한 CSS와 jQuery를 활용하여 구성하는 방법과 예제소스를 제공하고 있습니다. 특정 클라이언트 요구사항에 맞춰진 UI이지만 조금만 수정하면 원하는 형태의 UI로 활용할수 있으리라 생각이 듭니다.

1. UI 요구사항

[jQuery] 이전/다음 작품이 보이는 갤러리

UI디자인은 위 이미지와 같이 메인으로 보여지는 이미지 좌우로 이전/다음 이미지가 보여지는 형태입니다.
여기에서 클라이언트 요구사항은 다음과 같습니다.

  • 전체화면 사이드(좌우)쪽에 이전, 다음 이미지가 일정한 크기만큼 보이게
  • 좌우 버튼을 클릭하여 리스트가 슬라이드 되게
  • 하단으로 페이지네이션 표현과 클릭시 해당 이미지로 슬라이드되게

2. HTML 구조 만들기

HTML 마크업 작성은 다음과 같습니다. 이미지의 경로는 적절히 맞춰줘야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이전/다음 작품이 보이는 작품리스트</title>
</head>
<body>
<h1>이전/다음 작품이 보이는 작품리스트</h1>
<section id="port">
    <h2 class="screen_out">포트폴리오</h2>
    <div class="center">
        <ul class="list">
            <li>
                <img src="../html/img/3d1.png" alt="01 타이포활용 모션 그래픽">
                <p><a href="#">01 타이포활용 모션 그래픽</a></p>
            </li>
            <li>
                <img src="../html/img/3d2.png" alt="02 타이포활용 모션 그래픽">
                <p><a href="#">02 타이포활용 모션 그래픽</a></p>
            </li>
            <li>
                <img src="../html/img/3d3.png" alt="03 타이포활용 모션 그래픽">
                <p><a href="#">03 타이포활용 모션 그래픽</a></p>
            </li>
            <li>
                <img src="../html/img/3d4.png" alt="04 타이포활용 모션 그래픽">
                <p><a href="#">04 타이포활용 모션 그래픽</a></p>
            </li>
            <li>
                <img src="../html/img/3d5.png" alt="05 타이포활용 모션 그래픽">
                <p><a href="#">05 타이포활용 모션 그래픽</a></p>
            </li>
            <li>
                <img src="../html/img/3d6.png" alt="06 타이포활용 모션 그래픽">
                <p><a href="#">06 타이포활용 모션 그래픽</a></p>
            </li>
        </ul>
        <button>Prev</button>
        <button>Next</button>
    </div>
    <div class="page"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
</script>
</body>
</html>

3. CSS 스타일링 적용하기

CSS를 사용하여 갤러리의 스타일을 설정합니다. 여기서 유지보수 및 수정을 용이하게 하기 위해 CSS를 변수를 사용하였습니다.
다음의 코드중 상단에 있는 –imgWidth와 –imgHeight의 크기가 이미지의 크기로 설정해주세요.

<style>
    :root {
        --imgWidth : 600px;
        --imgHeight : 400px;
    }
    * {margin:0; padding:0; list-style: none;}
    .screen_out {display: none;}
    h1 {text-align: center; padding:20px;height:83px; box-sizing: border-box;}
    button, label {cursor: pointer;}
    button, input, img {display:block;}
    summary {display: none;}
    #port {height:calc(100vh - 83px); display: flex; justify-content: center; align-items: center; overflow: hidden; flex-direction: column;}
    #port .center {width:var(--imgWidth); position: relative;}
    #port .list {margin:auto; display: flex; gap:calc((100vw - var(--imgWidth) - 100px)/2) ; justify-content: center; width:fit-content;}
    #port .list>li {width: var(--imgWidth); height:var(--imgHeight); position: relative;} 
    #port .list>li>img {width:100%; height:100%; object-fit: cover;}
    #port .list>li>p {position: absolute;left: 0; top:0; width:100%; height:100%;overflow: hidden; pointer-events: none;}
    #port .list>li>p>a {display: flex; background:rgba(0,0,0,.8); text-decoration: none; color:#fff; justify-content: center; height:100%; align-items: center;transform: translateY(100%); transition: ease all .3s; backdrop-filter: blur(5px);pointer-events: none;}
    #port .list>li:hover>p a {transform: translateY(0);}
    #port>.center>button {padding:5px 10px;position: absolute;left:-70px; top:50%; transform: translateY(-50%); z-index: 200;}
    #port>.center>button:nth-of-type(2) {left:auto; right:-70px;}
    .page {margin-top:20px; display: flex; gap:20px;}
    .page span {background:#ddd; width:15px; height:15px; border-radius: 40px; cursor: pointer;}
    .page span.on {background:#333}
</style>

4. jQuery를 활용한 스크립트 작성

이제 jQuery를 사용하여 갤러리의 이전과 다음 이미지를 보이는 기능을 추가합니다. jQuery의 click 이벤트를 사용하여 버튼을 클릭했을 때 다음 이미지를 표시하고, 이전 이미지를 표시하는 기능을 구현할 수 있습니다.

<script>
    // 페이지네이션
    $(".list>li").each(function(item,index){
        $(".page").append("<span></span>");
        $(".page span").eq(0).addClass("on");
    })
    $(".page span").click(function(){
        list1 = $(".page span").index(this);
        $("#port .page .on").removeClass("on");
        $(".page span").eq(list1).addClass("on");
        var w = $("#port .list>li").width()+parseInt($("#port .list").css("gap"));
        $("#port .list").stop().animate({
                marginLeft:-w*list1
            },500)
        check_bt();
    })

    var list1 = 0;  // 작품리스트 페이지넘버
    var list1_move = false; // 애니동작여부
    // 오른쪽버튼
    $("#port .center>button").eq(1).click(function(){
        if(!list1_move) {
            list1_move = true;
            list1++;
            $("#port .page .on").removeClass("on");
            $(".page span").eq(list1).addClass("on");
            var w = $("#port .list>li").width()+parseInt($("#port .list").css("gap"));
            $("#port .list").stop().animate({
                marginLeft:-w*list1
            },500,function(){
                list1_move = false;
            })
            check_bt();
        }
    })
    // 왼쪽버튼
        $("#port .center>button").eq(0).click(function(){
        if(!list1_move) {
            list1_move = true;
            var w = $("#port .list>li").width()+parseInt($("#port .list").css("gap"));
            list1--;
            $("#port .page .on").removeClass("on");
            $("#port .page span").eq(list1).addClass("on");
            $("#port .list").stop().animate({
                marginLeft:-w*list1
            },500,function(){
                list1_move = false;
            })
            check_bt();
        }
    })
    // 버튼 활성화 체크
    check_bt();
    function check_bt() {
        if(list1 >= $("#port .list>li").length-1) {
                $(".center>button").eq(0).show();
                $(".center>button").eq(1).hide();
            } else if(list1 <= 0) {
                $(".center>button").eq(0).hide();
                $(".center>button").eq(1).show();
            } else {
                $(".center>button").show();
            }
    }
</script>

결론

이렇게하면 간단하게 jQuery를 사용하여 이전과 다음 작품이 보이는 갤러리를 만들 수 있습니다. 이런 갤러리 형태의 웹페이지를 작성할 때는 레이아웃과 디자인적인 요소는 가급적 CSS에서 작성하는 것이 좋고 UI측 인터렉션을 자바스크립트에서 작성하는 것이 좋습니다.
그리고 정해진 수치보다는 마크업과 디자인을 변경하였을때도 유동적으로 작성하도록 자바스크립 처리가 있어야 유지보수성이 좋아집니다.

자주 묻는 질문 (FAQs)

Q1. 이 갤러리를 다른 미디어 유형에도 적용할 수 있나요?
네, 이 기능은 이미지 외에도 비디오나 다른 미디어 유형에도 적용할 수 있습니다.

Q2. 이 코드를 수정하여 더 많은 이미지를 추가할 수 있나요?
네, 이미지를 추가하려면 HTML 구조에 img 태그를 더 추가하면 됩니다.

Q3. 갤러리 이미지의 크기를 조절하려면 어떻게 해야 하나요?
CSS에서 이미지의 너비와 높이를 조절하여 갤러리 이미지의 크기를 조절할 수 있습니다.

Q4. jQuery 이외의 다른 JavaScript 라이브러리를 사용할 수 있나요?
네, 다른 JavaScript 라이브러리를 사용하여 유사한 갤러리 기능을 구현할 수 있습니다.

Q5. 갤러리에 특수한 효과를 추가할 수 있을까요?
네, jQuery의 애니메이션 및 이펙트 함수를 사용하여 갤러리에 다양한 특수 효과를 추가할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다