이미지 갤러리 함수만들기 예제

이미지 배열 시작 위치는 100*100 위치로
시작시 이미지를 2열 200*200 크기로 출력
시작버튼 클릭 시 이미지를 3열 150*150크기로 출력
함수를 이용해 최대한 유지보수하기 쉽게 만들기

 

    <style>
        div.image-container {
            position: relative;
        }

        div.image-container img {
            position: absolute;
            left: 0;
            top: 0;
            width: 120px;
        }
    </style>

        $(document).ready(function() {

            // 이미지 찾기.
            var $images = $("#container1 img");
            
            $("#btnStart").click(function(){
                // 이미지 개수 구하기.
                var length = $images.length;
    
                // 이미지 배열하기.
                for (var i = 0; i < length; i++) {
                    // n번째 이미지 구하기
                    var $img = $images.eq(i);
    
                    // 위치 값 구하기
                    var x = 100 + ((i % 3) * 200);
                    var y = 100 + (parseInt(i / 3) * 200);
    
                    // 위치 설정
                    $img.css({
                        left : x,
                        top : y
                    });
                }
            });
        });
    </script>

    <button id="btnStart">시작</button>
    <div class="image-container" id="container1">
        <img src="banners/1.png" >
        <img src="banners/2.png" >
        <img src="banners/3.png" >
        <img src="banners/4.png" >
        <img src="banners/5.png" >
        <img src="banners/6.png" >
        <img src="banners/7.png" >
        <img src="banners/8.png" >
    </div>

 

 

단계1 1개로 통합되어있는 기능들을 나눠서 함수를 구분해준다.

    <script>
       $(document).ready(function() {

        });
        
        function init(){
            
        }
        
        function initEvent(){
            
        }
        
        function showGallery(){
            
        }
    </script>

 

 

단계2 함수에 코드담기

       
  <script> 
       $(document).ready(function() {
           init();
           initEvent();
        });
        
        var $images = null;
        function init(){
            // 이미지 찾기.
            $images = $("#container1 img");
        }
        
        function initEvent(){
            $("#btnStart").click(function(){
                 showGallery();
           })  
        }
        
        function showGallery(){
             // 이미지 개수 구하기.
            var length = $images.length;

            // 이미지 배열하기.
            for (var i = 0; i < length; i++) {
                // n번째 이미지 구하기
                var $img = $images.eq(i);

                // 위치 값 구하기
                var x = 100 + ((i % 3) * 200);
                var y = 100 + (parseInt(i / 3) * 200);

                // 위치 설정
                $img.css({
                    left : x,
                    top : y
                });
            }
        }
    </script>

 

 

단계3 매개변수 만들기

        
   <script>
        $(document).ready(function() {
           init();
           initEvent();
        });
        
        var $images = null;
        function init(){
            // 이미지 찾기.
            $images = $("#container1 img");
        }
        
        function initEvent(){
            $("#btnStart").click(function(){
                 showGallery();
           })  
        }
        
        function showGallery(count,width,height){
             // 이미지 개수 구하기.
            var length = $images.length;        
        
            // 이미지 배열하기.
            for(var i=0;i<length;i++){
                // n번째 이미지 구하기
                var $img = $images.eq(i);
                
                // 위치 값 구하기 
                var x = 100+((i%count)*width);
                var y = 100+(parseInt(i/count)*height);
                
                // 위치 설정
                $images.eq(i).css({
                    left:x,
                    top:y
                });
            }

        }
    </script>

 

 

단계4 매개변수 값을 넣어서 함수를 호출해준다.

<script>
        $(document).ready(function() {
           init();
           initEvent();
            // 시작시 이미지를 2열, 200*200 크기로 출력
            showGallery(2,200,200);
        });
        
        var $images = null;
        function init(){
            // 이미지 찾기.
            $images = $("#container1 img");
        }
        
        function initEvent(){
            $("#btnStart").click(function(){
                 showGallery(3,150,150);
           })  
        }
        
        function showGallery(count,width,height){
             // 이미지 개수 구하기.
            var length = $images.length;        
        
            // 이미지 배열하기.
            for(var i=0;i<length;i++){
                // n번째 이미지 구하기
                var $img = $images.eq(i);
                
                // 위치 값 구하기 
                var x = 100+((i%count)*width);
                var y = 100+(parseInt(i/count)*height);
                
                // 위치 설정
                $images.eq(i).css({
                    left:x,
                    top:y
                });
            }

        }
    </script>