Prev＆Next按钮带有使用jQuery覆盖的计数器

我使用jquerytools构建这个图像库，我在拇指上使用可滚动的div并在主图像上叠加……一切都像魅力一样……

编辑：在我把它作为赏金之前……我必须解释一下我需要一些干净简单的东西，因为图像来自php（加密），我不能修改它，只是“视图”就像我一样需要通过类和ID来实现这一点。 这就是为什么我尝试这个但是…

问题是我需要在查看叠加层时插入下一个和上一个按钮…这样，一旦加载叠加层，您就可以通过图像进行处理。

我为你做了这个小提琴我充满智慧的老师可以看到我在说什么。 http://jsfiddle.net/s6TGs/5/

我真的试过了。 但api.next（）它正在用于滚动拇指，所以我不知道怎么能告诉这个脚本..嘿，如果下一个被点击，你可以在thubs上插入下一个url，如果点击上一个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/

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

这里必须有一个奖励选项，如果有人帮助我，我会给你20box！ jajaja我很绝望。 因为现在我还需要为每个图像显示标题，我认为它与URL替换的过程相同，但是next＆prev只是我无法管理的事情。在PayPal上发布完整的解决方案和您的电子邮件，我会支付20！

Answer 1

好吧，从未尝试过jQueryTOOLS，所以认为玩起来会很有趣。

首先，这是我刚创建的JSFiddle： http ： //jsfiddle.net/xHL35/1/

现在，API调用需要一个变量来保存它

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

现在scrollapi，可以调用这样的函数：

 scrollapi.next(200); 

我已经复制了你自己的代码来选择图像，只是重写它以适应NEXT图像。 我没有创建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"); }); 

希望你能用它来开发画廊的其余部分。