Poprzedni i Następny przycisk z licznikiem nakładki przy użyciu jQuery

Question

zbudować galerię korzystając jquerytools używam przewijalną div na kciuki i nakładki na głównym obrazie ... Wszystko działa jak urok ..

EDIT: Zanim zrobię to jako nagrodę ... muszę wyjaśnić, że potrzebuję czegoś prostego i prostego, ponieważ obrazy pochodzą z php (zaszyfrowane) i nie mogę tego zmienić, tylko "widok", tak jak potrzebuję osiągnij to z czymś podobnym do klas i identyfikatorów. Dlatego próbuję tego, ale ...

Problem polega na tym, że podczas wyświetlania nakładki muszę wstawić przyciski Następny i Poprzedni ... aby można było przeglądać obrazy po załadowaniu nakładki.

Uczyniłem to dla ciebie, moi nauczyciele, pełni mądrości, widzą, co mówię. http://jsfiddle.net/s6TGs/5/

Naprawdę próbowałem. ale api.next() działa na przewijanie na kciukach, więc nie wiem, jak mogę rozpoznać ten skrypt .. hej, jeśli następnym razem klikniesz, yo pls wstaw następny URL na thubach, jeśli kliknięto poprzedni btn, pls przejdź do poprz url na kciuki .. Ale nie mogę

również i nie mniej ważne jak licznik 1/8 mają być wyświetlane = S ... jak w imię JavaScript to zrobić ..

Oto mój kod

$(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 
    }); 
}); 

wiem tutaj jest częścią mojej odpowiedzi po prostu może działać :(

http://jquerytools.org/demos/combine/portfolio/index.html

EDYCJA: Dzięki pierwszej odpowiedzi QuakeDK prawie osiągam cel .. Ale licznik nie jest w porządku, także gdy dojdziesz do 4 obrazu (numer 5 na liczniku) nie możesz iść do piątego kciuka .. jest to kod z tego zintegrowanego

http://jsfiddle.net/xHL35/5/

I tu odpowiedź jest kod dla POPRZEDNIE & przycisk Dalej

//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");  
     }); 

musi być możliwość nagradzania tutaj, jeśli niektóre Ciało mi pomóż Dam ci 20 skrzynek! jajaja Jestem zrozpaczony. Ponieważ teraz muszę również wyświetlać tytuł dla każdego obrazu, i myślę, że jest to ten sam proces zastępowania adresu URL, ale następny & prev to po prostu coś, czego nie mogę zarządzać. Opublikuj pełne rozwiązanie i swój e-mail na paypal, zapłacę 20!

Answer 1

Okay, nigdy nie próbowałem jQueryTOOLS, więc pomyślałem, że fajnie byłoby się z tym bawić.

przede wszystkim, oto JSFiddle Właśnie stworzył: http://jsfiddle.net/xHL35/1/

Teraz wywołania API potrzebujemy zmiennej trzymać go

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

teraz scrollapi, może wywoływać funkcje tak:

scrollapi.next(200); 

Skopiowałem własny kod do wyboru obrazu i po prostu przepisałem go, aby pasował do obrazu NEXT. Nie utworzyłem funkcji PREV, ale nie powinno być tak trudno odwrócić funkcję NASTĘPNY.

$(".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"); 

}); 

Mam nadzieję, że możesz go wykorzystać do stworzenia reszty galerii.