간단한 갤러리 함수로 만들기

간단한 갤러리 함수로 만들기

 

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


        // 이미지 목록을 담을 변수
        var $images = null;
        $(document).ready(function(){

            // 이미지  찾기
            $images = $("#Gallery1 img");
            // 이미지 배열 하기
            showGallery(5,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);

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

        
    </script>
    
    <p>Gallery1</p>
    <div class="image-Gallery" id="Gallery1">
       
        <img src="img/1.png" >
        <img src="img/2.png" >
        <img src="img/3.png" >
        <img src="img/4.png" >
        <img src="img/5.png" >
        <img src="img/6.png" >
        <img src="img/7.png" >
        <img src="img/8.png" >   
    </div>

    
    

var $images1 = $("#container1 img");

이미지 노드를 찾아서 변수에 저장하기

 

N번째 인덱스에 해당하는 이미지 접근하기(N은 0부터 시작)
var $img0=$images.eq(0); // 0번째 이미지 접근

 

이미지 위치 설정하기
$img0.css({left:이동위치, top:이동위치});

 

 

 

▶Gallery1

1. 먼저 showGallery()함수를 만든 후 기존 이미지 배열 기능 코드를 포장해 준다. 함수 호출시 전달되는 가로이미지배열 개수와 이미지 너비, 그리고 이미지 높이 값을 전달 받을 매개변수를 추가해준다.

count=가로 이미지 배열 개수
width=이미지 너비
height=이미지 높이

 

2. 이미지 목록을 담을 변수를 전역변수로 만든 후 null 값으로 초기화 시켜준다, null값을 사용했다는 것은 나중에 변수에 어떤 클래스의 인스턴스가 담길것을 뜻한다. 다만 images변수 앞에 $가 붙어있기 때문에 제이쿼리의 인스턴스가 저장될 것이라는 의미로 해석할 수 있다.

 

3. 문서에서 이미지를 찾아 전역변수인 $images에 저장해 준다. 이 데이터는 showGallery()에서 접근해 사용하게 된다.

 

4. showGallery()함수를 호출해 준다.

 

첫번째 갤러리 응용해서 다른 갤러리를 만들어 보자

첫번째 갤러리는 showGallery()함수 내부에서 전역 이미지 목록이 들어있는 $images변수를 사용하기 때문에 이외의 이미지 목록을 독립적으로 처리할수 없다.

그래서 이미지 데이터를 사용하는 대신에 원하닌 이미지 그룹을 선택해서 이미지 정보를 매개변수로 만들어서 넘기는 갤러리를 만들어보자

 

    <style>
        div.image-Gallery{
            position: relative;
            border:1px solid #000;
            height:600px;
        }

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

        $(document).ready(function(){
            // 이미지  찾기
            var $images1 = $("#Gallery1 img"); //3
            var $images2 = $("#Gallery2 img");


            // 이미지 배열 하기
            showGallery($images1, 6,150,150); //4
            showGallery($images2, 4,200,200);

        });

        //이미지 배열하기
        function showGallery($images, count,width,height){ //2
            // 이미지 개수 구하기.
            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);

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

    </script>
</head>
    
    
    <p>Gallery1</p>
    <div class="image-Gallery" id="Gallery1">
       
        <img src="img/1.png" >
        <img src="img/2.png" >
        <img src="img/3.png" >
        <img src="img/4.png" >
        <img src="img/5.png" >
        <img src="img/6.png" >
        <img src="img/7.png" >
        <img src="img/8.png" >   
    </div>
     <p>Gallery2</p>
     <div class="image-Gallery" id="Gallery2">
         
        <img src="img/1.png" >
        <img src="img/2.png" >
        <img src="img/3.png" >
        <img src="img/4.png" >
        <img src="img/5.png" >
        <img src="img/6.png" >
        <img src="img/7.png" >
        <img src="img/8.png" >   
    </div>

▶Gallery2

1. 전역변수인 $image는 더이상 필요 없으니 삭제한다.

2. showGallery()함수에 이미지 목록 정보를 담은 $images 매개변수를 추가해 준다.

3. Gallery1과 Gallery2에 들어있는 이미지 목록을 찾아서 변수에 저장한다.

4. 앞에서 구한 이미지 목록 정보를 매개변수로 해서 show,Gallery()를 요구사항에 맞춰서 출력한다.