Botón Anterior y Siguiente con contador para superposición usando jQuery
Construyo esta galería de imágenes usando jquerytools, uso div divisible en los pulgares y superposición en la imagen principal ... Todo funciona como encanto ...
EDITAR: Antes de hacer de esto una recompensa ... Tengo que explicar que necesito algo limpio y simple como este, porque las imágenes provienen de PHP (encriptado), y no puedo modificar esto, solo la "vista" como lo hago. Necesito lograr esto con algo como clases e ids. Es por eso que intento esto pero ...
El problema es que debo insertar los botones Siguiente y Anterior cuando está viendo la superposición ... para que pueda revisar las imágenes, una vez que se haya cargado la superposición ...
He hecho este violín para ti, mis maestros llenos de sabiduría pueden ver lo que estoy diciendo.http://jsfiddle.net/s6TGs/5/
Realmente lo he intentado. pero api.next () está funcionando para el desplazamiento en los pulgares, así que no sé cómo puedo decirle este script ... hey si se hace clic en el siguiente, por favor inserte la siguiente url en thubs, si se hace clic en el botón anterior, por favor ir a la url anterior en los pulgares .. Pero no puedo
Además, y no menos importante, debe mostrarse un Contador como 1/8 = S ... cómo en el nombre de JavaScript hace esto ...
Aquí está mi código
$(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
});
});
Sé que aquí es parte de mi respuesta, solo puedo hacer que funcione :(
http://jquerytools.org/demos/combine/portfolio/index.html
EDITAR: Gracias a la primera respuesta de QuakeDK, casi logro la meta. Pero el contador no está bien, también cuando llega a la imagen 4 (número 5 en el contador) no puede ir al quinto pulgar. Este es el CÓDIGO con esa respuesta integrada
Y aquí está el CÓDIGO para BOTÓN ANTERIOR Y SIGUIENTE
//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");
});
Debe haber una opción de recompensa aquí, si alguien me ayuda, ¡te doy 20box! jajaja estoy desesperada Porque ahora también necesito mostrar el título de cada imagen y creo que es el mismo proceso de reemplazo de URL, pero next & prev es solo algo que no puedo administrar. Publique la solución completa y su correo electrónico en PayPal, pagaré 20!