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