Я создаю эту галерею изображений с помощью jquerytools, я использую прокручиваемый div на больших пальцах и наложения на основном изображении... Все работает как шарм..
EDIT: Прежде чем сделать это щедростью... Я должен объяснить, что мне нужно что-то чистое и простое, потому что изображения поступают из php (зашифрованы), и я не могу изменить это, просто "view" "поскольку мне нужно достичь этого с помощью классов и идентификаторов. Вот почему я пробую это, но...
Проблема в том, что при просмотре оверлея мне нужно вставить кнопки "Далее" и "Пред.", чтобы вы могли проходить через изображения после загрузки оверлея.
Я сделал эту скрипку для вас, мои учителя, полные мудрости, могут видеть то, что я говорю. http://jsfiddle.net/s6TGs/5/
Я действительно пробовал. но api.next() он работает для прокрутки на больших пальцах, так что я не знаю, как я могу сказать это script.. эй, если в следующий раз щелкнуть, yo pls вставить следующий url на thubs, если предыдущий 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 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 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
EDIT: благодаря первому ответу QuakeDK я почти достигал цели. Но счетчик не в порядке, также когда вы добираетесь до 4-го изображения (номер 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 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 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-замены, но следующий и предыдущий - это просто то, что я не могу сделать. Опубликуйте полное решение и свою электронную почту на paypal, я буду платить 20
