JMiur [E]

Esta rutina crea un slideshow similar a la mostrada anteriormente pero efectuando un desplazamiento horizontal (se van desplazando de derecha a izquierda). También pueden colocarse cualquier cantidad de imágenes y establecer una velocidad.

Para implementarla, debemos cargar el archivo JavaScript (es aconsejable alojarlo en un servidor externo si vamos a utilizar la rutina varias veces, sino, basta copiar el código en el HEAD de la página). En cualquier caso:
<script type="text/javascript" src="URL_SlideshowSimpleV2.js"></script>
Luego, en cualquier parte donde se quiera mostrar, insertamos el siguiente script:
<script type="text/javascript">
mtx2IMG[0]="URL_imagen_1",
mtx2IMG[1]="URL_imagen_2",
.......
mtx2IMG[n]="URL_imagen_n";
slideshowV2(ancho,velocidad);
</script>
donde velocidad es un numero positivo (0 = velocidad máxima); ancho es el ancho que va a tener el slideshow, en este ejemplo es igual al ancho de las imágenes pero puede ser cualquier otro y URL_imagen es la lista de imágenes a mostrar.

Como siempre, en el caso de Blogger, para insertarse dentro de un post, todo debe ser escrito en una sola línea para evitar que aparezcan saltos de línea indeseados.

Este es el código de la rutina JavaScript:
// *** SlideshowSimpleV2.js ***

var velocidad; // velocidad (mayor valor = mayor velocidad)
var mtx2IMG=new Array(); // lista de imágenes

function slideshowV2(elAncho,AUXvelocidad) {
velocidad=AUXvelocidad;
var etiqueta='';
// bucle crear las etiquetas A e IMG con el contenido de las URLs de cada imagen
for (i=0;i<mtx2IMG.length;i++)
etiqueta=etiqueta+"<a href='javascript:void(0);'><img src="+mtx2IMG[i]+" border=0></a>";     
// escribir la etiqueta MARQUEE de manera dinámica
document.write('<marquee id="deplazaV2" scrollAmount="'+velocidad
+'"style="width:'+elAncho+'px;">'+etiqueta+'</marquee>');
}

// *** final del script ***

11 comentarios:

Anónimo  

Lo he intentado pero no comprendo muy bien eso de la lista de imágenes. Tienes que cargar varias imágenes en una lista y luego es la lista la que se va desplazando?

Responder
JMiur  

Aparte de cargar el archivo del script que son las instrucciones generales, lo que hay que hacer es, donde que quiera que aparezcan las imágenes, indicar cuales son.

Esa "lista" se llama mtx2IMG y, cada item de la lista es mtx2IMG[n] donde n es un número consecuitvo, empezando de cero.

mtx2IMG[0] contendrá la primera imagen así que:
mtx2IMG[0]="URL de LA IMAGEN 1";

mtx2IMG[1] contendrá la segunda imagen así que:
mtx2IMG[1]="URL de LA IMAGEN 2";

y así sucesivamente.

Lo que termina desplazándose son las imágenes contenidas en esa "lista".

Responder
Gem@  

Genial ;)

Responder
JMiur  

Veremos si el próximo puedo lograr algo más interactivo. Blogger, Blogger, Blogger, si no fuera por Blogger y sus cositas, sería más simple :)

Responder
Anónimo  

queiro ponerle fondo a mi blog

Responder
Flenning  

Hola, JMiur
Fijate en esta página, se ve algo raro en los post relacionados

http://vagabundia.blogspot.com/search/label/JavaScript?updated-max=2007-06-26T00%3A03%3A00-03%3A00&max-results=5

Responder
JMiur  

Solucionado. Siempre aparecerán ese tipo de cosas cuando se aplica algún cambio en la plantilla y algunas entradas no quedan "ordenadas" como deberían :D

Responder
Unknown  

Hola; he visto tu pagina y me parece que tienes cosas muy interesantes para mi que estoy empezando. Tengo una pregunta que quizas sea muy simple: los códigos que indicas para crear el Slide, ¿solo valen paga Blogger? yo los he introducido en un HTML junto con el fichero *.js y no funciona.

JMiur  

Es JavaScript y HTML por lo tanto, funcionará en cualquier sitio web.

Responder
karii  

Hola!
Gracias, se puede colocar un link a las imágenes?

JMiur  

Tendrás que cambiar las cosas porque no está pensado para eso ya que la tira de imágenes se genera con un bucle sin detalles. Podrías usar un array de dato o alguna otra metodología.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR