Presentación dinámica de imágenes

A veces queremos mostrar las fotografías que tenemos de una forma espectacular (o casi) y siempre pensamos en realizarlo mediante Flash. ¿Por qué no?, yo no soy muy amante del Flash, pero me parece bien que se use. Si tampoco eres fan del Flash o si prefieres hacerlo mediante DHTML, quizás te interese esta forma de realizarlo.
Se trata de mostrar las imágenes agrupadas de cinco en cinco (no más para que no quede saturada la página, aunque es válido para cualquier número de imágenes), moviéndose circularmente con perspectiva 3D, dando la posibilidad de parar el movimiento y aumentar o disminuir la velocidad de rotación.

Mostrar resto >>

<< Ocultar resto
Lo primero que necesitamos es un contenedor para colocar las imágenes, se va a usar una capa DIV y tendrá que tener posicionamiento absoluto para poder moverla libremente por la pantalla (position: absolute).

<DIV id="contenedor" style="position: absolute">Cargando datos...</DIV> <!-- El texto se pone para que aparezca algo mientras se cargan los datos -->

Una vez creado el contenedor, tenemos que escribir un control para controlar la velocidad de rotación y para movernos entre las distintas páginas.

    <table>     <tr>         <td onclick="paginaAnterior()" style="cursor: hand;             cursor:pointer"><< ANTERIOR</td>         <td onclick="reduce()" style="cursor: hand;             cursor:pointer">-</td>         <td id=vel1 onclick="ponVelocidad(1)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel4 onclick="ponVelocidad(4)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel7 onclick="ponVelocidad(7)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel10 onclick="ponVelocidad(10)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel13 onclick="ponVelocidad(13)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel16 onclick="ponVelocidad(16)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel19 onclick="ponVelocidad(19)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td onclick="aumenta()" style="cursor:             hand; cursor:pointer">+</td>         <td onclick="paginaSiguiente()" style="cursor:             hand; cursor:pointer">SIGUIENTE >></td>     </tr>     </table>

La primera y la última celda de la tabla son para ir a las páginas anteriores y siguientes. La segunda celda y la penúltima celda son para aumentar la velocidad o disminuirla. Las celdas intermedias para seleccionar directamente una velocidad.
Entremos en el código Javascript que se encarga del dinamismo de las fotografías, empezando por la definición de variables.

    var evento;

Necesitamos una variable para almacenar el identificador del proceso que ejecutamos repetitivamente para rotar las imágenes.

    var velocidad=10;

Almacenaremos la velocidad en un variable para que se pueda modificar.

    var nombreImagenes = new Array('1', '2', '3', '4', '5');

Un array con los nombres de las imágenes, la extensión la tengo predeterminada como ".jpg". En este caso son 5 imágenes, pero puede haber más, el número es este porque más podrían saturar la página. Deben existir dos imágenes, <nombre>.jpg y g<nombre>.jpg, la primera imágen es la miniatura y la segunda es el original que se abrirá cuando se pulse en la imagen. El tamaño de las miniaturas no debe ser grande para evitar así que unas se tapen a otras mientras mientras giran.

    var imagenes = new Array();

Para almacenar las imagenes.
La primera función que vamos a usar es la que crea los objetos Image y las posiciona en el contenedor. Deberá incluirse en el evento onload del BODY.

    function carga() {         // Obtenemos el objeto DIV que contendrá las imágenes         var obj = document.getElementById("contenedor");         /* Inicializamos cada imágen, dándole una posición          fija, estilos, eventos: hacer que pare la rotacion          cuando se pone encima el ratón, continuar          la rotación cuando se deja de poner el          ratón en la imagen, abrir la imagen original          cuando se pulsa en ella, ... */         for (var i=0; i<nombreImagenes.length; i++) {             imagenes[i] = new Image();             imagenes[i].src = nombreImagenes[i]+'.jpg';             imagenes[i].style.top = '100px';             imagenes[i].style.left = '200px';             imagenes[i].style.width = '100px';             imagenes[i].style.height = '100px';             imagenes[i].style.border = '1px solid black';             imagenes[i].style.cursor = (IE)? "hand":"pointer";             imagenes[i].onmouseover = parar;             imagenes[i].onmouseout = rotar;             imagenes[i].onclick = abre;             imagenes[i].angulo=0;             imagenes[i].ancho = tamImagenes[i][0];             imagenes[i].alto = tamImagenes[i][1];             imagenes[i].comentario = comentarios[i];         }         // Calculamos la separación entre cada imagen         var parte = 360/imagenes.length;         // Posicionamos cada imagen         for (i=0; i<imagenes.length; i++) {             posiciona(imagenes[i], i*parte);         }         // Añadimos las imagenes al contenedor         obj.innerHTML = "";         for (var i=0; i<imagenes.length; i++) {             obj.appendChild(imagenes[i]);         }     }

La siguiente función es la que se encarga de posicionar la imagen dentro del contenedor, se calcula la posición izquierda, posición derecha, el ancho y el alto de la imagen y la posicion en la coordenada Z. Para hacer el efecto 3D es necesario cambiar el tamaño de la imagen para simular la profundidad.

    function posiciona(_obj, _parte) {         // Calculamos el ángulo de la circunferencia por la         // que gira         var parte = (_parte+_obj.angulo)*2*Math.PI/360;         _obj.angulo = (parseInt(_obj.angulo) + _parte) % 360;         _obj.style.position = "absolute";         // Posición dentro del eje Z (profundidad)         _obj.style.zIndex = parseInt((200-40*Math.sin(parte)));         // Calculamos el ancho y el alto según la profundidad         // (en este caso se trata de un cuadrado)         ancho = parseInt((65-35*Math.sin(parte)));         _obj.style.width = ancho+"px";         _obj.style.height = ancho+"px";         // Calculamos la posicion vertical según el         // ancho y el ángulo         _obj.style.top = parseInt(                           (100-40*Math.sin(parte))                           -(ancho/2))+"px";         // Calculamos la posicion horizontal según el         // ancho y el ángulo         _obj.style.left = parseInt(                           ((document.body.clientWidth/2)                           +100*Math.cos(parte))-(ancho/2))+"px";     }

La función para rotar las imágenes se debe llamar en el evento onload del BODY y debe ejecutarse cada cierto tiempo.

    function rotar() {         // Obtenemos todas las imagenes del contenedor y         // luego las posicionamos         var obj = document.getElementById("contenedor");         var imgs = obj.getElementsByTagName("img");         for (var i=0; i<imgs.length; i++) {             posiciona(imgs[i], velocidad);         }         evento = setTimeout("rotar()", 100);     }

Y por último las funciones relativas a la velocidad de rotación.

    // Para el movimiento de las imagenes cancelando     // el proceso de rotación     function parar(evt) {         clearTimeout(evento);     }     // Disminuye la velocidad     function reduce() {         if (velocidad > 1) {             velocidad -= 3;         }     }     // Aumenta la velocidad     function aumenta() {         if (velocidad < 19) {             velocidad += 3;         }     }     // Fija la velocidad     function ponVelocidad(n) {         velocidad = n;     }

Un ejemplo se puede ver aquí: ARCHIVO ZIP