集成在脚本上时出现奇怪的计数器行为

Question

好的，我已经完成了这段代码

http://jsfiddle.net/xHL35/9/

我刚刚进行了一些css更改，并将image_wrap重命名为image_wrap_galeria

此处http://queretaro.orsilin.com.mx/index.php?page=item/view/15/Probando

但是计数器真的不计算.items上的imgs。

我真的试图调试这个。我找不到错误

这是我的JS代码。

<script>
$(function() {
    $(".scrollable").scrollable();

    var scrollapi = $(".scrollable").data('scrollable');

    $(".items img").click(function() {
        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("t_", "");


        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();


        // call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);
            wrap2.find("img").attr("src", url);


        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();


    $("img[rel]").overlay({
        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: true,
        onBeforeLoad: function() {
            var items = $('.items'),
                count = items.find("img").length,
                current = items.find('.active'),
                currentIndex = current.index("img");


            $("#imageCounter").html( currentIndex+" of "+count);
        }
    });
    //NExt BTN

    $(".nextImg").click(function(){
        // Count all images
        var items = $('.items'),
            images = items.find('img'),
            count = images.length,
            currentImage = items.find('.active'),
            currentImageIndex = images.index(currentImage),
            next = $(images.get(currentImageIndex + 1)),
            nextImageIndex = images.index(next);

        if ( currentImageIndex === (count - 1) ){
            next = $(images.get(0));
            nextImageIndex = images.index(next);
        }

        if (nextImageIndex === 0) {
            scrollapi.begin(200);
        } else if ( nextImageIndex % 4 === 0 && nextImageIndex > 0) {
            scrollapi.next(200);
        }

        // Get the current image number
        var current = $(next.index("img"));

        var nextUrl = next.attr("src").replace("t_", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", nextUrl);
            wrap2.find("img").attr("src", nextUrl);
        };

        // begin loading the image from www.flickr.com
        img.src = nextUrl;

        $("#imageCounter").html((nextImageIndex + 1) +" of "+count);

        // activate item
        $(".items img").removeClass("active");
        next.addClass("active");
    });

    //PREV BTN
    $(".prevImg").click(function(){
        // Count all images
        var items = $('.items'),
            images = items.find('img'),
            count = images.length,
            currentImage = items.find('.active'),
            currentImageIndex = images.index(currentImage),
            prev = $(images.get(currentImageIndex - 1)),
            prevImageIndex = images.index(prev);

        // var prev = $(".items").find(".active").prev("img");

        if(currentImageIndex === 0){
            prev = $(images.get(count-1));
            prevImageIndex = images.index(prev);
        }

        if(prevImageIndex === (count - 1)) {
            // We have reached the end - start over.
            scrollapi.end(200);
        } else if ( (prevImageIndex + 1) % 4 === 0 ) {
            scrollapi.prev(200);
        }

        // Get the current image number
        var current = (prev.index("img"));

        var prevUrl = prev.attr("src").replace("t_", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", prevUrl);
            wrap2.find("img").attr("src", prevUrl);
        };

        // begin loading the image from www.flickr.com
        img.src = prevUrl;

        $("#imageCounter").html((prevImageIndex + 1) +" of "+count);

        // activate item
        $(".items img").removeClass("active");
        prev.addClass("active");

    });
});


</script>