javascript - jQuery を使用したオーバーレイ用のカウンター付きの [前へ] ボタンと [次へ] ボタン

Question

jquerytools を使用してこの画像ギャラリーを構築し、スクロール可能な div を親指で使用し、メイン画像にオーバーレイを使用しています...すべてが魅力的に機能します..

編集:これを報奨金にする前に...画像は php (暗号化) から来ているため、このようなクリーンでシンプルなものが必要であることを説明する必要があります。これを変更することはできません。クラスやIDなどでこれを達成する必要があります。これが私がこれを試す理由ですが...

問題は、オーバーレイを表示しているときに [次へ] ボタンと [前へ] ボタンを挿入する必要があることです...オーバーレイが読み込まれたら、画像を確認できます..

私はあなたのためにこのフィドルを作りました。知恵に満ちた私の教師は、私が言っていることを見ることができます。http://jsfiddle.net/s6TGs/5/

私は本当に試しました。しかし、 api.next() は親指のスクロールで機能しているので、このスクリプトをどのように伝えることができるかわかりません..ねえ、次がクリックされた場合は、次のURLをthhubsに挿入してください。前のbtnがクリックされた場合は、pls親指で前の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/

そして、ここに 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");    
        });

ここに報酬オプションがあるはずです。誰かが私を助けてくれたら、20ボックスを差し上げます! jajaja 私は絶望的です。今は各画像のタイトルも表示する必要があり、URL の置換と同じプロセスだと思いますが、次と前は私が管理できないものです.完全なソリューションとメールをペイパルに投稿してください。支払います20！

Answer 1

jQueryTOOLS を試したことがないので、楽しく遊べると思いました。

まず、作成したばかりの JSFiddle を次に示します: http://jsfiddle.net/xHL35/1/

現在、API 呼び出しにはそれを保持するための変数が必要です

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

これで scrollapi は次のように関数を呼び出すことができます:

scrollapi.next(200);

画像を選択するための独自のコードをコピーし、次の画像に合わせて書き直しました。PREV 関数は作成していませんが、NEXT 関数を元に戻すのはそれほど難しくありません。

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

});

これを使用して、ギャラリーの残りの部分を開発できることを願っています。