Recientemente m313n45 me pidio ayuda para hacer un efecto de marquesina con unas imágenes y al dar click sobre alguna de ellas se viera la versión completa, todo esto sin usar flash.

Lo realice obviamente con Javascript + JQuery y a continuacion veremos paso a paso como lograrlo.

Tambien pueden ver el ejemplo completo aquí

Las imágenes para las marquesina son 6, iniciamos con el markup de las imágenes.

1
2
3
4
5
6
7
8
9
10

<div id="container">
	<img src="01.png" alt="1"/>
	<img src="02.png" alt="2"/>
	<img src="03.png" alt="3"/>
	<img src="04.png" alt="4"/>
	<img src="05.png" alt="5"/>
	<img src="06.png" alt="6"/>
</div>
<div id="viewport">
</div>

Además ocupamos darle estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13

#container
{
	overflow: hidden;
	width: 400px;
	height: 64px;
	border-style: solid;
}
#container img
{
	position: relative;
	width: 60px;
	height: 64px;	
}

overflow: hidden; hace que las imágenes que no quepan en el contenedor esten ocultas en ves de causar scrolling o un efecto similar, además hacemos las imágenes mas pequeñas y asignamos su posicion como relativa, lo cual sera útil a realizar la animación.

Hasta el momento esto se ve así:

Notece que una de las imágenes se encuentra oculta de momento, debido a que no se alcanza a mostrar en el contenedor.

Después iniciamos con la animacion, requerimos a JQuery para facilitarnos las cosas, tendrán que agregar la referencia a la libreria en su header además de agregar el código de animación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var deltaX = 5;
var deltaT = 42;	
 
$(document).ready (function ()
{
	setTimeout("animate()", deltaT); //start animation
});
 
function animate ()
{
	var left = parseInt ($("#container img").css("left"));
	left -= deltaX;
 
	$("#container img").css("left", left + "px");
 
	setTimeout ("animate()", deltaT); //continue animation
}

Donde deltaT define cada cuantos milisegundos ocurrira la animacion y deltaX indica el desplazamiento cada intervalo de deltaT milisegundos. La animación la realizamos modificando la propiedad left del css. Ahora esto se ve así:

Pero para el momento en que ustedes lleguen a leerlo todas las imágenes habrán desaparecido hacia la izquierda, así que recarguen la pagina por favor y bajen rápidamente hasta este punto para ver la animación.

Eso ocurre por que ocupamos hacer que la marquesina sea giratoria, para lograr el efecto debemos de quitar la primer imagen cuando esta ya no sea visible y ponerla después de la ultima imagen. La primer imagen no es visible cuando su atributo css left tenga un valor de -LongitudImagen, en este caso, -60px.

Como quitaremos la imagen, ocupamos volver a ajustar el desplazamiento a la izquierda aumentando el atributo css left con la longitud de la imagen que quitamos, es decir 60px. El script queda entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var deltaX = 5;
var deltaT = 42;	
var imageWidth = 60;
 
$(document).ready (function ()
{
	setTimeout("animate()", deltaT); //start animation
});
 
function animate ()
{
	var left = parseInt ($("#container img").css("left"));
	left -= deltaX;
 
	if (left <= -imageWidth) //if first image is no longer visible
	{
		left += imageWidth;
		$("#container img:first")
                	.remove ()
                	.insertAfter("#container img:last");
	}
 
	$("#container img").css("left", left + "px");
 
	setTimeout ("animate()", deltaT); //continue animation
}

Y ya podemos ver la animación circular:

Por ultimo requerimos que al dar click en una imagen la mostremos en su tamaño original, para dar el efecto de vinculo debemos de cambiar el css de las imágenes para que aparezca la “manita” cuando pongamos el puntero sobre la imagen, el css queda entonces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#container
{
	overflow: hidden;
	width: 400px;
	height: 64px;
	border-style: solid;
}
#container img
{
	position: relative;
	width: 60px;
	height: 64px;	
	cursor: pointer;
}

Solo nos falta el script, pero debemos de tener cuidado, por que cuando quitamos la imagen para ponerla al final de la lista perdemos la asociación del evento y tenemos que volverla agregar,por lo que el script final queda:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var deltaX = 5;
var deltaT = 42;	
var imageWidth = 60;
 
$(document).ready (function ()
{
	$("#container img").click (changeViewportImage);
	setTimeout("animate()", deltaT); //start animation
});
 
function changeViewportImage ()
{
	$("#viewport img").remove ();
	$("#viewport").append ($(this).clone ());
}
 
function animate ()
{
	var left = parseInt ($("#container img").css("left"));
	left -= deltaX;
 
	if (left <= -imageWidth) //if first image is no longer visible
	{
		left += imageWidth;
		$("#container img:first")
		    .remove ()
		    .insertAfter("#container img:last")
		    .click (changeViewportImage);
	}
 
	$("#container img").css("left", left + "px");
 
	setTimeout ("animate()", deltaT); //continue animation
}

Y queda finalmente así (recuerden dar click sobre alguna imagen):

Tambien pueden ver el ejemplo completo aquí