Buduję galerię zdjęć za pomocą jquerytools, używam przewijanego div na kciukach i nakładki na głównym obrazie ... Wszystko działa jak urok ..

EDIT: Zanim zrobię z tego nagrodę ... Muszę wyjaśnić, że potrzebuję czegoś czystego i prostego, ponieważ obrazy pochodzą z php (zaszyfrowane) i nie mogę tego zmienić, tylko „widok” jak ja trzeba to osiągnąć za pomocą klas i identyfikatorów. Dlatego próbuję tego, ale ...

Problem polega na tym, że gdy przeglądam nakładkę, muszę wstawić przyciski Next i Prev ... aby przejść przez obrazy po załadowaniu nakładki.

Zrobiłem to skrzypce dla was, moi nauczyciele pełni mądrości mogą zobaczyć, co mówię.http://jsfiddle.net/s6TGs/5/

Naprawdę próbowałem. ale api.next () działa na przewijanie kciuków, więc nie wiem, jak mogę powiedzieć ten skrypt ... hej, jeśli zostanie kliknięty następny, yo pls wstawia kolejny url na thubs, jeśli poprzedni btn zostanie kliknięty, pls idź do prev url na kciukach .. Ale nie mogę

Również i nie mniej ważny jest licznik taki jak 1/8, musi być wyświetlony = S ... jak w imię JavaScript to robisz ..

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, że tutaj jest część mojej odpowiedzi Po prostu mogę to sprawić :(

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 przejść do piątego kciuka .. To jest KOD z tą odpowiedzią zintegrowaną

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

A oto KOD PRZYCISKU PREV i NEXT

//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ć tu opcja nagrody, jeśli ktoś mi pomoże, dam ci 20 boxów! jajaja Jestem zdesperowany. Ponieważ teraz muszę także wyświetlać tytuł dla każdego obrazu i myślę, że jest to ten sam proces zastępowania adresu URL, ale następny i poprzedni jest czymś, czego nie mogę zarządzać .. Opublikuj pełne rozwiązanie i swój e-mail na paypal, zapłacę 20!