$gall 이라는 요소 클릭시 사진에 보이는 슬라이드 쇼 화면 $zoom이 나오는 그림인데, 밑 $previewImg 들을 클릭해서도 slide()함수가 실행되게끔 하고싶은데 새로운 변수 i를 기존 slide()함수에 들어가있는 i에 덮고싶습니다.

예를 들어 $gall 중 세번째 요소를 클릭해서 $zoom이 화면에 나오게 됐을 때, 변수 i 에는 2라는 값이 저장돼 있는데, $zoom 안에 $previewImg 중 네번째 요소를 클릭하면, 그대로 $gall을 클릭했던 때의 세번째 사진이 화면에 출력됩니다. 당연히 slide()함수 안에 변수 i에는 2라는 값이 저장돼 있구요. 어떻게 해결해야 할까요? 도와주세요!

        var $gall = $('div.after_load > div.modal_wrap > div.modals.modal_history > div.content > div.gallery > div.images');
    var i,
        count = $gall.length - 1,
        $viewImg = $zoom.find('div.image > img'),
        $previewImg = $zoom.find('div.preview > div.item_wrap > div.items');
    //var $imgTitle = $gall.eq(i).children('h5.img_expl');

    $gall.on('click', function(){
        //show $zoom
        $zoom.show();
        i = $gall.index(this);
        slide();

        // 닫기 버튼을 누를때.
        $zoom.children('span').on('click', function(){
            $zoom.hide();
        });
    });

    function slide(){
        var cur = $gall.eq(i).children('img');

        // $previeImg hover effect.
        if (!$previewImg.hasClass('active')) {
            $previewImg.children('img').mouseover(function(){
                $(this).addClass('active');
            });
        };

        $viewImg.attr('src', cur.attr('src'));
        $viewImg.fadeOut(0);
        $viewImg.fadeIn(500);

        $previewImg.children('div.border').css('display', 'none');
        $previewImg.eq(i).children('div.border').css('display', 'block');
        $previewImg.children('img').removeClass('active');
        $previewImg.eq(i).children('img').addClass('active');

        console.log('current ',i)
    };

    $previewImg.on('click', function(){
        var i = $previewImg.index(this);
                **//slide() 함수 안에 새로운 변수 i를 전달하기.**
        slide();
    });

    function previous(){
        if(i > 0){
            i = i-1;
        }else{
            i = count;
        };
        slide();
    };

    function next(){
        if(i < count) {
            i = i+1;
        }else{
            i = 0;
        };
        slide();
    };

    $('div.gall_mask > div.zoom > div.controller > div.btn.left').on('click', function(){
        previous();
    });
    $('div.gall_mask > div.zoom > div.controller > div.btn.right').on('click', function(){
        next();
    });