이미지 갤러리 독립적인 함수 만들기

 

https://moo-you.tistory.com/122?category=310832

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

저번에 했던 이미지 갤러리 함수는 갤러리 함수 내부에서 images변수를 사용하기 때문에 이외의 이미지를 독립적으로 사용할수 없다. 그래서 이번에는 원하는 이미지 그룹을 선택해서 독립적으로 사용할수 있고 이미지 정보를 매개변수로 만들어서 넘기는 갤러리를 만들어보자

 

 

기존코드

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

            // 이미지 찾기.
            var $images = $("#container1 img");

            // 이미지 개수 구하기.
            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>

이미지를 찾아서 images 변수에 넣고 이미재 개수를 구한다음

이미지 개수만큼 반복문 실행

이미지를 차례로 img 변수에 넣고 위치 값을 구해준다.

<p>container1</p>
    <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>
    <p>container2</p>
    <div class="image-container" id="container2">

        <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>

 

 

변경된 코드

    <script>
    
        $(document).ready(function(){
            // 이미지  찾기
            var $images1 = $("#container1 img"); //3
            var $images2 = $("#container2 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>

우선 이미지를 찾아서 각각 images1변수와 images2변수에 넣어준다.

showGallery함수를 호출하고 매개변수를 연결해준다.

showGallery(이미지목록,가로이미지 배열 개수, 이미지 너비, 이미지 높이);

showGallery함수가 호출되고 이미지 개수를 구한다 개수만큼 반복하기

위치값에 매개변수 값을 넣어준다.

이렇게 공통된 부분을 showGallery로 추가해줬기 때문에

이미지 찾기와 배열만 추가해주면 다음번에도 사용가능하다.