Bueno tengo un problema ,nose si se pueda solucionar... les cuento
Tengo una Galeria de imagenes con un tabla y varias thumbnails, cada una esta enlazada a su imagen mas grande que carga en un IFRAME funciona bien, el problema es que quiero que esas imagenes que cargan en el iframe lo hagan con fade in cuando yo de click en la miniatura pero cargandolas diractamente como imagen y no tener que poner cada una de estas en un html diferente para despues cargarlas en el iframe...
Gracias anticipadas a los que me puedan ayudar....
tengo un JS para fade in que encontre en http://www.anieto2k.com/2006/11/05/fade-a-imagenes-en-el-evento-onload/
CSS
#photo-cont {
width:640px;
height:480px;
}
#photo {
width:450px;
height:338px;
}
JAVASCRIPT
window.onload = function() {initImage()}
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
<body>
<div id="photo-cont">
<iframe width="640" height="480" frameborder="0" marginheight="0" name="1iframe"></iframe></div>
<a href="FOTO EXTERNA SIN HTML" target="1iframe">imagen</a>
</body>
</html>
