갤러리 < 더보기 >만들기

 

더보기 버튼을 클릭하면 숨겨진 요소가 보이는...

뭐... 흔하게 보는 그 이벤트.

-HTML

<section id="Box" class="item-box">
    <div class="container-fluid">
        <div class="more-box row g-0">
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                          
                    <span>현장 1</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                         
                    <span>현장 2</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                           
                    <span>현장 3</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 4</span>
                </a>
            </div>
            <!--4-->
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                          
                    <span>현장 5</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 6</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                           
                    <span>현장 7</span>
                </a>
            </div>
            <div class="item">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 8</span>
                </a>
            </div>
            <!--8-->
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                           
                    <span>현장 9</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 10</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 11</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 12</span>
                </a>
            </div>
                <!--12-->
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                           
                    <span>현장 13</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                            
                    <span>현장 14</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">                           
                    <span>현장 15</span>
                </a>
            </div>
            <div class="item none">
                <img class="pr-img" src="img/00.png" alt=""></img>
                <a href="#">
                    <span>현장 16</span>
                </a>
            </div>
        </div>
    </div>
    <div class="btn-group">
        <button class="more-open" type="button">더보기</button>
        <button class="more-close none" type="button">닫기</button>
    </div>
</section>


<script>
   const $box=document.querySelector('.item-box');
              
   $box.addEventListener('click',function(e){
     const el=e.currentTarget; //모든 요소를 감싼 요소
     const tg=e.target //이벤트 요소
     const min=8; //최소 보이는 갯수
     const add=4; //더보기 갯수
     moreEvent(el,tg,min,add);
   }); 
</script>

 

-JAVASCRIPT

const moreEvent= function more(el,tg ,min,add){

const $box=document.querySelector('#'+el.id);//모든 컨텐츠를 담은 박스
const $more_box=$box.querySelector('.more-box');//갯수에 의해 늘어나거나 줄어들 박스
const _item=$more_box.getElementsByClassName('item');//컨텐츠
const n_size=_item.length; // item 갯수
const n_min=min; //최소 보이는 갯수
const n_add=add; //더보기 갯수
let scrY=$box.offsetTop; //스크롤 되돌리기

    if(tg.classList.contains('more-open')){
        MoreOpen(tg,n_add,n_size,_item);    
    }
    else if(tg.classList.contains('more-close')){
        MoreClose(tg,n_min,n_size,_item,scrY);    
    }


//더보기-open 정의   

    function MoreOpen(tg,add,n_size,item){

        let n_loop=add; // 더보기 갯수 만큼 반복
        let i=0;

        while(i<n_size){// 아이템 갯수만큼 반복
            //none이 있으면 실행
            if(item[i].classList.contains('none')){
                item[i].classList.remove('none');
                n_loop--;
                if(n_loop===0){
                    if(i===n_size-1){
                        tg.classList.add('none'); // 열기 버튼 숨김
                        tg.nextElementSibling.classList.remove('none');
                        break; //루프 마친 시점과 아이템의 마지막 요소가 겹치면 실행후 종료
                    }
                    else{break;}
                 } // 아이템이 남아도 종료
            }
            i++; 
            if(i===n_size){
                tg.classList.add('none'); // 열기 버튼 숨김
                tg.nextElementSibling.classList.remove('none');
                
                break;
            }
        }
    }

    // 더보기 - close 정의
    function MoreClose(tg,min,n_size,item,scrY){

        for(let i=n_size-1; i>min-1; i--){
            item[i].classList.add('none');
            tg.classList.add('none');
            tg.previousElementSibling.classList.remove('none');
            if(i===min){
                window.scrollTo(0,scrY)
            }
        }
        
    }
}

 

플러그인인척 하는....

 

부트스트랩으로 css하고 있는데....

왜인지 재미가 없다. 재미없으니 속도가 안난다.

어찌보면 편한 것도 알겠는데....

난... 고생을 사서하는 타입인가 보다.

얼른 다른 재미있는거로 옮겨야지...