Saludos, tengo estoy haciendo una especie de "visor de imágenes", la idea es que se muestren 4 imágenes pequeñas y que al dar clic en estas se visualicen sus contrapartes ampliadas con el efecto fadeIn en un DIV, que previamente han estado ocultas (display: none) salvo la primera imagen ampliada. La función que he creado hace lo siguiente:
1. Oculta todas las capas contendoras de las imágenes grandes.
2. Muestra la imagen grande que corresponde a la primera con un efecto.
Les adjunto la función:
Código HTML:
function CargaImagen(img){
if($("div#" + img).css("display") == 'none'){
$("div#img_mediana div").hide();
$("div#" + img).fadeIn(1500);
}
}
El maquetado que uso es el siguiente:
Código HTML:
<div id="iconos">
<a href="#" onclick="javascript: CargaImagen('img1'); return false;"> <img src="./ico_img1.jpg" /> </a>
<a href="#" onclick="javascript: CargaImagen('img2'); return false;"> <img src="./ico_img2.jpg" /> </a>
<a href="#" onclick="javascript: CargaImagen('img3'); return false;"> <img src="./ico_img3.jpg" /> </a>
<a href="#" onclick="javascript: CargaImagen('img4'); return false;"> <img src="./ico_img4.jpg" /> </a>
</div>
<div id="img_mediana">
<div id="img1">
<img src="./img_producto1.jpg" />
</div>
<div id="img2" style="display:none">
<img src="./img_producto2.jpg" />
</div>
<div id="img3" style="display:none">
<img src="./img_producto3.jpg" />
</div>
<div id="img4" style="display:none">
<img src="./img_producto4.jpg" />
</div>
<div> El código trabaja bien,
el problema viene cuando hago clic muy rápido entre una imagen pequeña y otra: cargan dos imágenes a la vez con el efecto fadeIn. Si uso solo show() que es equivalente a un css("display", "block") no ocurre este problema.
¿Alguien ha pasado ya por esto?
Espero me puedan ayudar.