Ampliar imagen – ventana modal
Ventana modal o Modal Window en inglés se conoce como el efecto de diseño Web que se da a las imágenes o videos sobre la pantalla cuando pulsamos con el ratón. Hay muchos efectos diferentes por Internet, la mayoría de los que hay son para fotografías, pero muy pocos hay para los videos en flash, mas adelante vamos a presentar uno de ellos.
Como ya sabemos estos efectos de diseño Web se realizan con DHTML (JS+CSS). Es importante conocer Java Script para poder modificar el código fuente y poder adaptar estos sistemas a nuestras necesidades. Hay una librería para hacer todo esto y es mootools.
Les voy a mostrar los que he considerado los mejores y mas prácticos que he podido encontrar por la Red.
Roebox, desarrollado por John Saddington, permite ampliar las imágenes en miniatura, utiliza como no, la librería mootools. Podéis descargar este ejemplo modificado por Informatica Autonomos.
El problema de esto es que solo sirve para fotografías, muy probablemente modificando un poco el código podríamos hacer lo mismo para causar el efecto para videos en flash. Pero para que vamos a hacer esto si otro ya lo ha hecho 
:
Tenemos Videobox, muy práctico y por supuesto utilizando la librería de mootools. Los videos que se pueden reproducir como dicen en su web: Youtube, Metacafe, Google Video, iFilm y un video flash propio.
Podéis descargar aquí un ejemplo completo.
Expandir imágenes
He visto un montón de scritps que lo hacen, pero encontrar uno que lo haga bastante bien para el diseño Web, hay pocos.
De los que he visto recomiendo usar expando, desarrollado por John Davenport Scheuer.
Su uso es sencillo, tenemos que adjuntar añadir el archivo JS a nuestro código HTML y donde nos interese añadir el parámetro class=”expando” al tag img.
Aquí podéis descargar el ejemplo completo retocado por informatica autonomos. Además se puede reducir o aumentar la velocidad. También podemos realizar mas cosas claro que retocando el código fuente.
Lo malo de este expando es que en Internet Explorer las imágenes van un poco mas lentas, pero bueno es admisible. ¿Alguien se anima a retocar el código?
Mostrar o quitar imágenes
Este es un efecto muy sencillo y bastante básico en JS y diseño Web, básicamente es añadir al elemento CSS que indique display: none
Un poco mas difícil es que al hacer click aparezca y desaparezca pero no tiene ningún secreto.
Una idea seria:
Crear un elemento div en el cual hacemos un evento onclick, donde vamos cambiando el nombre de la clase. Teniendo dos clases una display: none, y la otra sin display: none;
Para cambiar de una clase a otra, pasamos la clase como parámetro, aquí tenéis el ejemplo:
<style type=”text/css”>
div.shadow {
display:none;
}
</style>
<script type="text/javascript">
function changeClassName(theElementName, classNameShadow) {
var theElement = document.getElementById(theElementName);
if ( classNameShadow == theElement.className ) {
theElement.className = "";
}
else {
theElement.className = classNameShadow;
}
}
</script>
<a onclick=”changeClassName(’shadow’, ’shadow’)” rel=”nofollow” href=”javascript:void(null)”>Mostrar / Ocultar</a>
<div id='shadow' class='shadow'>
<p>Esto aparece y desaparece cuando se hace click</p>
</div>