Prev & Next button with counter for overlay using jQuery

Question

I build this image gallery using jquerytools, I\'m using scrollable div on thumbs and overlay on the main image... Everything works like charm..

EDIT: Before I make

Answer 1

Okay, never tried jQueryTOOLS, so thought it would be fun to play with.

first of all, here's the JSFiddle I just created: http://jsfiddle.net/xHL35/1/

Now, the API calls need a variable to hold it

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

Now scrollapi, can call the functions like this:

scrollapi.next(200);

I've copied your own code for choosing image and just rewritten it to fit the NEXT image. I haven't created the PREV function, but should not be that hard to reverse the NEXT function.

$(".nextImg").click(function(){
    // Count all images
    var count = $(".items img").length;

    // Finding the next image
    var next = $(".items").find(".active").next("img");
    // Is the next image, the last image in the wrapper?
    if(next.is(":last")){
        // If it is, go to next DIV and get the first image
        next = $(".items").find(".active").parent().next("div").find("img:first");
        // If this dosn't exists, we've reached the end
        if(next.index() == -1){
          // We have reached the end - start over.
          next = $(".items img:first");
          scrollapi.begin(200);
        } else {
          // Not at the end, show next div in thumbs
          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").fadeTo("medium", 0.5);
    var wrap2 = $("#mies1");

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

    // Show the counter
    $("#imageCounter").html("Image: "+current+" of "+count);

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

});

Hoping you can use this to develop the rest of the gallery.