Trước & Tiếp nút với truy cập cho lớp phủ sử dụng jQuery

Question

tôi xây dựng thư viện hình ảnh này sử dụng jquerytools, Tôi đang sử dụng div cuộn trên ngón cái và lớp phủ trên hình ảnh chính ... Tất cả mọi thứ hoạt động như quyến rũ ..

EDIT: Tôi phải giải thích rằng tôi cần một thứ gì đó sạch sẽ và đơn giản như thế này, bởi vì những hình ảnh đến từ php (mã hóa), và tôi không thể sửa đổi điều này, chỉ là "xem" khi tôi cần đạt được điều này với một cái gì đó giống như các lớp học và id. Đây là lý do tại sao tôi thử điều này nhưng ...

Vấn đề là tôi cần chèn nút tiếp theo và nút trước khi bạn xem lớp phủ ... để bạn có thể đi máng hình ảnh, khi lớp phủ đã được tải.

Tôi đã thực hiện điều này fiddle cho bạn giáo viên của tôi đầy trí tuệ có thể nhìn thấy những gì tôi đang nói. http://jsfiddle.net/s6TGs/5/

Tôi thực sự đã thử. nhưng api.next() nó hoạt động để cuộn trên ngón tay cái, vì vậy tôi không biết làm thế nào tôi có thể nói kịch bản này .. hey nếu tiếp theo được nhấp, yo xin chèn url tiếp theo trên thubs, nếu trước đó btn được nhấp, xin đi đến url trước trên ngón tay cái .. Nhưng tôi không thể

Ngoài ra và không kém phần quan trọng, Số lượt truy cập như 1/8 phải được hiển thị = S ... làm thế nào trong tên JavaScript bạn làm điều này ..

đây là mã của tôi

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

tôi biết đây là một phần của câu trả lời của tôi, tôi chỉ có thể làm cho nó hoạt :(

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

EDIT: Nhờ câu trả lời đầu tiên của QuakeDK Tôi gần như đạt được mục tiêu .. Nhưng bộ đếm không ổn, khi bạn đến 4 hình ảnh (số 5 trên quầy) bạn không thể đi đến ngón cái thứ 5 .. đây là MÃ với câu trả lời tích hợp

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

Và đây là mã cho PREV & nút bên cạnh

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

có phải là một lựa chọn phần thưởng ở đây, nếu một số cơ thể giúp tôi, tôi cung cấp cho bạn 20box! jajaja Tôi tuyệt vọng. Bởi vì bây giờ tôi cũng cần hiển thị tiêu đề cho mỗi hình ảnh, và tôi nghĩ rằng đó là cùng một quá trình thay thế URL, nhưng tiếp theo & prev chỉ là một cái gì đó tôi không thể quản lý .. Đăng giải pháp đầy đủ và email của bạn trên paypal, tôi sẽ trả tiền 20!

Answer 1

Được rồi, chưa bao giờ thử jQueryTOOLS, vì vậy nghĩ rằng sẽ thật thú vị khi chơi cùng.

trước hết, đây là JSFiddle tôi vừa tạo: http://jsfiddle.net/xHL35/1/

Bây giờ, các cuộc gọi API cần một biến để giữ nó

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

Bây giờ scrollapi, có thể gọi các chức năng như thế này:

scrollapi.next(200); 

Tôi đã sao chép mã của riêng bạn để chọn hình ảnh và chỉ viết lại để phù hợp với hình ảnh TIẾP THEO. Tôi chưa tạo hàm PREV, nhưng không khó để đảo ngược hàm 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"); 

}); 

Hy vọng bạn có thể sử dụng điều này để phát triển phần còn lại của thư viện.