jQuery 이미지 갤러리

jQuery image Gallery

---

jQuery 를 이용한 이미지 갤러리 

일단 디자인은 없이 그냥 내키는대로 했다.

CSS는 알아서 입히시길 바랍니다.

(살짝 디자인을 할것을 그랬나...)

    

    

        

            

            

            

            

            

            

        
    
    

        이전
        다음
    

* {margin:0; padding:0; list-style: none;}
.slider-wrap {margin:100px auto; width:600px; border:1px solid #ccc;}

/* 이미지 */
.img-box {width:400px; margin:20px auto;  height:250px; overflow:hidden; font-size:0; border:2px solid orchid;}
.img-box img {width:100%; height:100%;}

/* 버튼 */
.small-img {margin-top:30px;  margin:0 auto; width:245px; overflow:hidden; border:3px solid red;} /* width 값 조정 */
.small-img .img-wrap {width:600%; font-size:0; box-sizing: border-box}
.small-img .img {display:inline-block; vertical-align: middle; border:2px solid olivedrab; margin-right:10px; width:50px; height:50px; }
.small-img .img.on {border:2px solid orange;}
.small-img .img a {display:block; width:100%; height:100%; overflow:hidden;}
.small-img .img a img {width:100%; height:100%;}

.btn-area {text-align: center; margin:10px 0 10px; }

nction slider(){

    var $wrap = $('.slider-wrap'),
        $bigImg = $wrap.find('.img-box'),
        $imgWrap = $('.img-wrap');
    
    var $item = $imgWrap.find('.img'),
        $itemWidth = $imgWrap.find('.img').outerWidth();
    
    var $prevBtn = $('.prev'),
        $nextBtn = $('.next');
    
    
    var num = 0;
    var len = $imgWrap.find('.img').length - 4; // 리스트에 뿌려진 화면 개수 

    // 처음 시작할때 이미지 복사후 붙이기
    var clone = $item.children().children().eq(0).clone();
    $bigImg.html(clone);
    
    $item.on('click', function(){
        var $this = $(this);
        var idx = $wrap.find($item).index($this);
        var clone = $this.children().children().clone(idx);
        
        $this.addClass('on').siblings().removeClass('on');
        $bigImg.html(clone);

        
    });

    function isAnimate() {
        if($imgWrap.children().is(':animated'))
            return true;
        else 
            return false;
    }
    
    $prevBtn.on('click', function(){
        if(isAnimate()){
            return;
        }
        num--
        if(num >= 0){
            $imgWrap.children().eq(0).animate({
                'margin-left' : '+=' + ($itemWidth + 10 + 'px') // num 은 margin 값
            });
        }else {
            num = 0;
        }                    
    });

    $nextBtn.on('click', function(){
        if(isAnimate()){
            return;
        }

        num++
        if(num > len){
            num = len;
        }
        else{
            $imgWrap.children().eq(0).animate({
                'margin-left' : '-=' + ($itemWidth + 10 + 'px')
            });
        }     
        
    });
};

sub's

Blog