我使用 jquerytools 构建了这个图片库，我在拇指上使用可滚动的 div 并在主图像上叠加......一切都像魅力一样工作......
编辑：在我将此作为赏金之前...我必须解释一下我需要像这样干净简单的东西，因为图像来自 php (encrypted) ，我无法修改它，只是我的“视图”需要通过类和 id 之类的东西来实现这一点。这就是我尝试这个的原因，但是......
问题是当您查看叠加层时我需要插入下一个和上一个按钮...这样您就可以在加载叠加层后浏览图像..
我为您制作了这个小提琴，我的老师们充满智慧，可以看到我在说什么。http://jsfiddle.net/s6TGs/5/
我真的试过了。但是 api.next() 它适用于拇指上的滚动，所以我不知道如何告诉这个脚本.. 嘿，如果单击下一个，请在 thubs 上插入下一个 url，如果单击了上一个 btn，请大拇指上的上一个网址..但我不能
同样重要的是，必须显示像 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 个拇指.. 这是代码与该答案集成
这是上一个和下一个按钮的代码
//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 只是我无法管理的东西.. 将完整的解决方案和您的电子邮件发布到贝宝上，我会付款20！