Я создаю эту галерею изображений с помощью jquerytools, я использую прокручиваемый div для больших пальцев и накладываю на основное изображение ... Все работает как шарм ..

РЕДАКТИРОВАТЬ: Прежде чем я сделаю это щедрое вознаграждение ... Я должен объяснить, что мне нужно что-то чистое и простое, как это, потому что изображения приходят из php (в зашифрованном виде), и я не могу изменить это, просто «вид», как я нужно добиться этого с чем-то вроде классов и идентификаторов. Вот почему я пытаюсь это, но ...

Проблема в том, что мне нужно вставлять кнопки Next и Prev при просмотре оверлея ... чтобы вы могли просматривать изображения после загрузки оверлея.

Я сделал эту скрипку для вас, мои учителя, полные мудрости, могут видеть, что я говорю.http://jsfiddle.net/s6TGs/5/

Я действительно пытался. но api.next () работает для прокрутки на превью, так что я не знаю, как я могу сказать этот сценарий .. эй, если щелкнуть по следующему, йо, пожалуйста, вставьте следующий URL в thabs, если предыдущий btn нажал, пожалуйста перейти к предыдущему URL на больших пальцах .. Но я не могу

Кроме того, и не менее важно, чтобы отображался счетчик типа 1/8 = S ... как во имя JavaScript вы делаете это ..

Вот мой код

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

Я знаю, что это часть моего ответа, я просто могу заставить его работать :(

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

РЕДАКТИРОВАТЬ: Благодаря первому ответу QuakeDK я почти достиг цели. Но счетчик не в порядке, также, когда вы добираетесь до 4 изображения (номер 5 на счетчике), вы не можете перейти к 5-му пальцу .. Это КОД с этим ответом интегрированы

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

А вот и КОД для ПРЕДЫДУЩЕЙ И СЛЕДУЮЩЕЙ КНОПКИ

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

Здесь должен быть вариант вознаграждения, если кто-нибудь поможет мне, я дам вам 20box! jajaja я в отчаянии. Потому что теперь мне также нужно отображать заголовок для каждого изображения, и я думаю, что это тот же процесс замены URL, но я не могу справиться с next & prev. Опубликуйте полное решение и вашу электронную почту на PayPal, я заплачу 20!