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 this a bounty...I have to explain that I need something clean and simple like this, because the images come from php (encrypted) , and I can't modify this, just the "view" as I need to achieve this with something like classes and ids. This is why I try this but... The problem is I need to insert a Next and Prev Buttons when you are viewing the overlay... so you can go trough the images, once the overlay has been loaded.. I have made this fiddle for you my teachers full of wisdom can see what I am saying. http://jsfiddle.net/s6TGs/5/ I have really tried. but api.next() it's working for the scrolling on the thumbs , so I don't know how can I tell this script.. hey if next is clicked, yo pls insert next url on thubs, if previous btn is clicked, pls go to prev url on thumbs.. But I can't Also and no less important a Counter lik…

Accepted Answer

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.

Prev & Next button with counter for overlay using jQuery

Solution

Problem