Variable para atributo Id seleccionado

[Facundo72]

¡Saludos!

He creado varias galerías de imágenes categorizadas, todo dentro de una misma página.
Se trata de varios módulos iguales (el nombre de la clase es .espacios) con sus thumbnails, sobre los que al hacer click cambia la imagen ampliada en un escenario (lo he llamado .escenario) miestras aparece un gif animado de carga(.loader).

Como se trata de varias categorías, cada div.espacios tiene un id diferente. Así:

Código:

<div class="espacios" id="edificios">
    <div class="escenario">
     <img src="edificios1_grande" />
     <img src="edificios2_grande" />     
   </div>   
   <a href="#" title="edificios1"><img src="#" title="edificios1" /></a>
   <a href="#" title="edificios2"><img src="#" title="edificios2" /></a>    
</div>

<div class="espacios" id="monumentos">
    <div class="escenario">
     <img src="monumentos1_grande" />
     <img src="monumentos2_grande" />     
   </div>   
   <a href="#" title="monumentos1"><img src="#" title="monumentos1" /></a>
   <a href="#" title="monumentos2"><img src="#" title="monumentos2" /></a>    
</div>

<div class="espacios" id="">...

Y éstas son las funciones:

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

Entiendo que éste código se puede reducir considerablemente creando una variable para el id seleccionado en concreto, reduciendo todo a una sola función.
¿Se os ocurre cómo hacerlo? Esto del código no es mi fuerte ni mucho menos, y cualquier aportación será agradecida.

Recibid un cordial saludo.

[mayid]

Seguro. Empezando por tu selector. Podes cambiar esto:

$('.espacios#monumentos a')

por esto

$('.espacios a')

Luego la pregunta es qué variables dentro del evento click son unicas para cada caso. En principio yo veo solamente esta:

$("#monumentos .escenario img")

Cambiemosla por:

$(this).siblings("div.escenario").children("img") // es decir, etiqueta hermana llamada escenario, y su hija la img.

$('.espacios a') .click(function (evt) {
evt.preventDefault();
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$(".escenario .loader").fadeIn("slow", function() {

laImagen = $(this).siblings("div.escenario").children("img");

laImagen .attr({ src: largePath, alt: largeAlt }).load(function() {
$(".escenario .loader").fadeOut("slow");
});
});
});

ref:
http://api.jquery.com/siblings/
http://api.jquery.com/children/

Respecto a esto: $(".escenario .loader") habría que tener es cuidado de que se refiera realmente al escenario en cuestion. Mejor que quede así:


$(this).siblings("div.escenario")... y ahí el .loader no se que sea.

[Facundo72]

¡Hola Mayid!

Gracias por tu rápida respuesta .

Estoy probando lo que has puesto, pero no me funciona: aparece el .loader pero no cambia la imagen en el escenario.

El .loader es un div posicionado de forma absoluta y oculto (display:block) que aparece mientras se carga la imagen. Ahora veo que no lo he incluido en el html que he puesto antes:

Código:

<div class="espacios" id="edificios">
    <div class="escenario">
     <img src="edificios1_grande" />
     <img src="edificios2_grande" />     
   </div>   
   <a href="#" title="edificios1"><img src="#" title="edificios1" /></a>
   <a href="#" title="edificios2"><img src="#" title="edificios2" /></a>
   <div class="loader"></div>    
</div>

<div class="espacios" id="monumentos">
    <div class="escenario">
     <img src="monumentos1_grande" />
     <img src="monumentos2_grande" />
     <div class="loader"></div>
   </div>   
   <a href="#" title="monumentos1"><img src="#" title="monumentos1" /></a>
   <a href="#" title="monumentos2"><img src="#" title="monumentos2" /></a>    
</div>

Idealmente el .loader debería aparecer sólo en el .escenario activo, pero no me importa que aparezca en todos porque les he dado una altura (a los div .espacios) suficiente para que sólo vea uno de ellos cada vez.

En cualquier caso voy a analizar lo que me has dicho detenidamente, porque no me resulta sencillo esto de la programación (de diseño y maquetación, lo que quieras, pero esto... me cuesta).

Un saludo.

[mayid]

y oculto (display:block)

display: hidden dirás.

O sea que es un div con una imagen constante que no se ve porque está tapado? Y lo manejas con z-index siendo que tiene posición absoluta? Seguro que se puede ver? Tiene una imagen de fondo y ancho y alto especificados o como es que muestra la imagen?

El segundo load no te va a funcionar porque no está cargando nada, fijate:

.load(function() {
$(".escenario .loader").fadeOut("slow");
});

Quizás lo que te convenga es hace un setTimeOut(). Publicarías tu codigo como esta ahora?

[Facundo72]

¡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!

[mayid]

Ok. Entiendo. Y respecto a lo último que te marqué , del load que solo tiene una función, me acabo de dar cuenta de que que es un método para averiguar cuando está cargado una imagen y hacer algo en consecuencia, no?

Habría que ver qué es lo que no funciona del borrador que te pasé primeramente. Qué linea te da el error? Te fijate en el explorer o en la consola (f12) del firefox?

Van una mejora de ese codigo, con mas asignación de variables que hacen que todo sea más abstracto y específico. En el codigo anterior estabamos captando todos los escenarios, sin discriminar. Asegurate de entender bien que es siblings porque es la clave.

$('.espacios a').click(function (evt) {

evt.preventDefault();
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");

escenario = $(this).siblings("div.escenario");
loader = escenario.children("div.loader");

loader.fadeIn("slow", function() {

laImagen = escenario.children("img");

laImagen.attr({ src: largePath, alt: largeAlt }).load(function() {

loader.fadeOut("slow");
});

});

});

Yo lo que entiendo es que el codigo saca atributos de un link, los transfiera a una imagen, y hace el fade para que se vea interesante la transición.

[Facundo72]

¡Gracias Mayid!

Código:

$(document).ready(function(){
	$('div.espacios a').click(function (evt) {
		evt.preventDefault();
		
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		
		escenario = $(this).siblings("div.escenario");
		loader = escenario.children("div.loader");
		
		loader.fadeIn("slow", function() {
		
		laImagen = escenario.children("img");
		
		laImagen.attr({ src: largePath, alt: largeAlt }).load(function() {
		loader.fadeOut("slow");
		});
	});
});

Va perfecto, salvo en IE (el dichoso IE7 e IE8) que en el primer click se queda el loader (no hace el fadeOut) hasta que vuelves a hacer click, ya sea en la misma imagen o en otra.

Recibe un cordial saludo.