플러긴 만들기

================================================ js ========================================================
(function ($) {

    

    var settings; // 한개 이상의 매개변수를 담을 그릇 : params, 해시

    

    // photoview라는 이름의 jQuery 플러그인 생성

    $.fn.photoview = function (callerSettings) {

        // extend 함수에 의해 한 개 이상의 매개변수를 동적으로 받을 수 있다. 

        settings = $.extend({

            photoElement: '#photoviewPhoto', // 넘겨온 썸네일 포토리스트

            transformer: function (name) { return name.replace(/thumbs/, 'bigs'); }, // 큰이미지의 경로

            nextControl: null, // 다음 버튼, 지정하지 않으면 설정되지 않는다.

            previousControl: null, // 이전 버튼

            firstControl: null, // 처음 버튼

            lastControl: null // 마지막 버튼

        }, callerSettings || {}); // 공식과 같은 코드(?)

        settings.photoElement = $(settings.photoElement);

        settings.thumbnails = this.filter('img'); // img 요소만 settings에 thumbnails 프로퍼티에 저장

        settings.thumbnails.each(function (n) { this.index = n; });

        settings.current = 0; // 현재 보여지는 이미지의 인덱스 저장

        

        // 썸네일 목록을 순회하여 index 속성에 담음

        settings.thumbnails.click(function () { showPhoto(this.index); }); 

        // 나머지 연산자를 사용하여 리스트의 끝에 도달 시 인덱스를 다시 처음으로 설정

        settings.photoElement.click(function () {

            showPhoto((settings.current + 1) % settings.thumbnails.length);

        });

        // 처음

        $(settings.firstControl).click(function () {

            showPhoto(0);

        });

        // 이전

        $(settings.previousControl).click(function () {

            showPhoto((settings.thumbnails.length + settings.current - 1) %

                settings.thumbnails.length);

        });

        // 다음

        $(settings.nextControl).click(function () {

            showPhoto((settings.current + 1) % settings.thumbnails.length);

        });

        // 마지막

        $(settings.lastControl).click(function () {

            showPhoto(settings.thumbnails.length - 1);

        });

        // 처음로드시 첫번째 이미지를 보여줌.

        showPhoto(0);

    

        return this;

    };

    // 사진 보여주기 함수 

    var showPhoto = function (index) {

        settings.photoElement.attr('src', // src 속성에 대입

        settings.transformer( // transformer 함수를 사용하여 썸네일을 큰이미지로 변경

            settings.thumbnails[index].src)); // index에 해당하는 썸네일의 src 특성을 찾는다.

        settings.current = index; // 현재 인덱스를 다시 저장

    };

})(jQuery);


====================================================== plugin 쓰기 ==============================================

    <script type="text/javascript">

        $(document).ready(function () {

            // 썸네일 이미지 개체 리스트에 상세 이미지 출력

            $('#products img').photoview({

                photoElement: '#photo',           // 사진을 보여줄 개체

                previousControl: '#prev',         // 이전버튼 개체

                nextControl: '#next',             // 다음버튼 개체

                firstControl: '#first',           // 처음버튼 개체

                lastControl: '#last'              // 마지막버튼 개체

            });    

        });

    </script>