¡Hola!
Cierto
Código:
.escenario .loader{
width:80px;
height:80px;
margin:160px 0 0 260px;
position:absolute;
display:none;
background:#222 url(../img/loader.gif) no-repeat center;
}
Sí, aparece en tanto está cargandose la imagen seleccionada, y desaparece cuando ésta se ha cargado:
Código:
.load(function() {
$(".escenario .loader").fadeOut("slow");
});
Repito que el código funciona así:
Código:
$('.espacios#edificios a').click(function (evt) {
evt.preventDefault();
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".escenario .loader").fadeIn("slow", function() {
$("#edificios .escenario img").attr({ src: largePath, alt: largeAlt }).load(function() {
$(".escenario .loader").fadeOut("slow");
});
});
});
$('.espacios#monumentos a').click(function (evt) {
evt.preventDefault();
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".escenario .loader").fadeIn("slow", function() {
$("#monumentos .escenario img").attr({ src: largePath, alt: largeAlt }).load(function() {
$(".escenario .loader").fadeOut("slow");
});
});
});
})
... (hay otras 7 catagorías, ademas de monumentos y edificios;
El código es de otro proyecto mío anterior en que sólo había una galería de imágenes: pichabas en la imagen pequeña (thumbnail) y se veía en el escenario en grande (con el gif animado .loader apareciendo y desapareciendo en función de la carga de cada imagen). El código era así:
Código:
//Reemplazo fotos de producto
$('#galeria a').click(function (evt) {
evt.preventDefault();
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".escenario .loader").fadeIn("slow", function() {
$(" .escenario img").attr({ src: largePath, alt: largeAlt }).load(function() {
$(".escenario .loader").fadeOut("slow");
});
});
});
(como se ve está comentado por el programador que me ayudaba entonces)
En el caso actual al id #galeria lo he llamado con la clase .espacios, porque como digo, hay varias galerías en la misma página. Y a cada .espacios le doy un id diferente para que sea la imagen de esa galería (.espacio) y no todas, la que aparezca en su escenario.
El código funciona como he puesto, pero creo que se puede reducir a una sola función que le diga: "cambia la imagen de este id concreto en su escenario (el de este id)". Porque, de otro modo, estoy en #monumentos, veo las imágenes, y cuando hago scroll a #edificios, veo en el .escenario (de #edificios) el monumento que ya he visto.
(Vaya parrafada
, perdón)
¡Un saludo!