Ich baue diese Bildergalerie mit jquerytools, ich benutze scrollbares div auf Daumen und Overlay auf dem Hauptbild ... Alles funktioniert wie Charme.

EDIT: Bevor ich das zu einem Kopfgeld mache ... muss ich erklären, dass ich so etwas sauberes und einfaches brauche, weil die Bilder von PHP (verschlüsselt) kommen und ich das nicht ändern kann, nur die "Ansicht" wie ich müssen dies mit so etwas wie Klassen und IDs erreichen. Deshalb versuche ich das aber ...

Das Problem ist, dass ich beim Anzeigen der Überlagerung die Schaltflächen Weiter und Zurück einfügen muss, damit Sie die Bilder durchsuchen können, nachdem die Überlagerung geladen wurde.

Ich habe diese Geige für dich gemacht, meine Lehrer können voller Weisheit sehen, was ich sage.http://jsfiddle.net/s6TGs/5/

Ich habe es wirklich versucht. aber api.next () funktioniert für das Scrollen auf den Thumbs, daher weiß ich nicht, wie ich dieses Script erklären kann. Hey, wenn auf next geklickt wird, fügen Sie bitte die nächste URL auf thubs ein, wenn auf previous btn geklickt wird, pls gehe zu prev url auf daumen .. aber ich kann nicht

Auch und nicht weniger wichtig ist, dass ein Zähler wie 1/8 angezeigt wird = S ... wie im Namen von JavaScript machst du das ..

Hier ist mein 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
  });
});

Ich weiß, dass dies ein Teil meiner Antwort ist. Ich kann es einfach zum Laufen bringen :(

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

EDIT: Dank der ersten Antwort von QuakeDK habe ich fast das Ziel erreicht. Aber der Zähler ist nicht in Ordnung, auch wenn Sie zum Bild 4 (Nummer 5 auf dem Zähler) gelangen, können Sie nicht zum 5. Daumen gehen. Dies ist der CODE mit dieser Antwort integriert

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

Und hier ist der CODE für PREV & NEXT BUTTON

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

Hier muss es eine Belohnungsoption geben, wenn mir jemand hilft, gebe ich dir 20box! jajaja ich bin verzweifelt Weil ich jetzt auch den Titel für jedes Bild anzeigen muss und ich denke, es ist der gleiche Prozess wie beim URL-Ersetzen, aber next & prev ist nur etwas, das ich nicht verwalten kann. Poste die vollständige Lösung und deine E-Mail auf paypal, ich bezahle 20!