title: Prev & Next button with counter for overlay using jQuery
body: <p>I build this image gallery using jquerytools, I'm using scrollable div on thumbs and overlay on the main image... Everything works like charm.. </p>
  
  <p>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...</p>
  
  <p>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..</p>
  
  <p>I have made this fiddle for you my teachers full of wisdom can see what I am saying. <a href="http://jsfiddle.net/s6TGs/5/" rel="nofollow noreferrer">http://jsfiddle.net/s6TGs/5/</a></p>
  
  <p>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</p>
  
  <p>Also and no less important a Counter like 1/8 have to be displayed =S... how in the name of JavaScript you do this..</p>
  
  <p>Here is My code</p>
  
  <pre><code>$(function() {
  $(".scrollable").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").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", 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();
  });
  
  // This makes the image Overlay with a div and html
  
    $(document).ready(function() {
        $("img[rel]").overlay({
  
        // some mask tweaks suitable for modal dialogs
        mask: {
          color: '#ebecff',
          loadSpeed: 200,
          opacity: 0.9
        },
  
        closeOnClick: true
    });
  });
  </code></pre>
  
  <p>I know here is part of my answer I just can make it work :(</p>
  
  <p><a href="http://jquerytools.org/demos/combine/portfolio/index.html" rel="nofollow noreferrer">http://jquerytools.org/demos/combine/portfolio/index.html</a></p>
  
  <p>EDIT: Thanks to the first answer by QuakeDK I almost achieve the goal.. But the counter is not ok, also when you get to the 4 image (number 5 on counter) you cant go to the 5th thumb .. This is the CODE with that answer integrated</p>
  
  <p><a href="http://jsfiddle.net/xHL35/5/" rel="nofollow noreferrer">http://jsfiddle.net/xHL35/5/</a></p>
  
  <p>And here is the CODE for PREV &amp; NEXT BUTTON</p>
  
  <pre><code>//NExt BTN
  
    $(".nextImg").click(function(){
              // Count all images
              var count = $(".items img").length;
  
              var next = $(".items").find(".active").next("img");
              if(next.is(":last")){
                  next = $(".items").find(".active").parent().next("div").find("img:first");
                  if(next.index() == -1){
                      // We have reached the end - start over.
                      next = $(".items img:first");
                      scrollapi.begin(200);
                  } else {
                      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;
  
              $("#imageCounter").html("Image: "+current+" of "+count);
  
              // activate item
              $(".items img").removeClass("active");
              next.addClass("active");
  
          });
  
    //PREV BTN
  
      $(".prevImg").click(function(){
              // Count all images
              var count = $(".items img").length;
  
              var prev = $(".items").find(".active").prev("img");
              if(prev.is(":first")){
                  prev = $(".items").find(".active").parent().prev("div").find("img:first");
                  if(prev.index() == -1){
                      // We have reached the end - start over.
                      prev = $(".items img:first");
                      scrollapi.begin(200);
                  } else {
                      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").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", prevUrl);
                  wrap2.find("img").attr("src", prevUrl);
              };
  
              // begin loading the image from www.flickr.com
              img.src = prevUrl;
  
              $("#imageCounter").html("Image: "+current+" of "+count);
  
              // activate item
              $(".items img").removeClass("active");
              prev.addClass("active");    
          });
  </code></pre>
  
  <p>There must be a reward option here, if somebody help me I give you 20box! jajaja I'm desperate. Because now I also need to display title for each image, and I think it's the same process of URL replace, but next &amp; prev is just something I can't manage.. Post the full solution and your email on paypal, I will pay 20!</p>