创建一个jquery自定义灯箱设置。

Question

我正在创建自定义jquery灯箱。

我遇到的问题是设置功能并不像我想的那样工作，我想要做的是点击图像我希望setup（）函数运行并更新变量（prev_img，next_img，count，current_img_src）。此外，当单击#next和#prev时，我想运行设置功能并进行更新。

    <ul id="items">
        <li class="shrink"><img src="foo1.jpg" alt="foo1"/></li>
        <li class="shrink"><img src="foo2.jpg" alt="foo2"/></li>
        <li class="shrink"><img src="foo3.jpg" alt="foo3"/></li>
        <li class="shrink"><img src="bar1.jpg" alt="bar1"/></li>
        <li class="shrink"><img src="bar2.jpg" alt="bar2"/></li>
        <li class="shrink"><img src="bar3.jpg" alt="bar3"/></li>
    </ul>
    <nav>
        <span id="next">Next</span><br/><span id="prev">Prev</span>    
    </nav>

脚本

$(function(){
    var prev_img, next_img, count, current_img_src = '';

    $('.shrink img').on('click', function(e){       
        if(e.target.tagName == 'IMG'){
            current_img_src = $(this).attr("src");
            setup();
        }
    });
    $('#next').click(function(){
        console.log(next_img);
        setup();
    });
    $('#prev').click(function(){
        console.log(prev_img);
        setup();
    });

    function setup(){
       count = $('.shrink img').length;    
       $(".shrink img").each(function(){        
            if($(this).attr("src").toString() === current_img_src.toString()){
                prev_img = $(this).prev();
                next_img = $(this).next();
            }
        });
    }
});