En esta oportunidad, vamos a ver como implementar un slideshow en javascript para cuatro imágenes. Los rotadores de imágenes son ya viejos conocidos en la red, muchos de ellos se pueden ver también en flash. En esta sección del portal de Yahoo pueden ver uno funcionando.

Tambien hay otros tantos realizados al igual que este en javascript, con la salvedad de que la mayoría se fabrican a partir de frameworks como Mootools y Jquery; acá pueden ver un ejemplo.

¿Qué diferencia hay entre hacerlo a partir de un framework o desarrollarlo desde cero en Javascript?

Primero expliquemos que es un framework; un framework es un entorno de trabajo en el que partimos de un conjunto de clases ya pre programadas que nos permiten implementar funciones, crear instancias, extender objetos, etc. Esto hace que sea mucho más sencillo desarrollar una aplicación. Otra ventaja es que esas clases pre fabricadas están todo el tiempo siendo testeadas para su correcto funcionamiento en todos los navegadores, algo a lo que los desarrolladores web llamamos Cross-browser. Se pueden imaginar las horas que nos ahorramos de testing utilizando un framework no?

Como no todo en la vida es color de rosas, los framework también tienen sus desventajas. La primera a mi modo de ver es que nos obliga a implementar todo el tiempo código de otra persona, por lo tanto, cuando quiero implementar algo que el framework no lo tiene se me hará casi imposible compatibilizar ambos métodos de programación. La segunda es que necesitamos aprender a programar un lenguaje nuevo, el lenguaje del framework.

No hay que engañarse, es realmente difícil mejorar el nivel de programación de un framework, un framework está dessarrollado por un equipo de expertos y se está mejorando constantemente, encambio lo que uno puede llegar a programar, dependerá de una persona y nuestra experiencia. Lo bueno de hacer el desarrollo de cero, es que puedes disfrutar el proceso, hacer cálculos, abstraer código, entender a fondo los problemas y hacerlo a tu medida; todo esto es algo que se está perdiendo, precisamente por la llegada de los framework.

Ahora veamos como implementamos este Slideshow:

En el header


En la primera línea de código incluímos la hoja de estilos, esa con la cuál aplicaremos el diseño a nuestro Slider. En la siguiente hacemos lo propio con el archivo “highlight.js”, este contiene una clase javascript del mismo nombre. Debajo, creamos una instancia de la clase constructora “highlight” que aparece dentro del archivo que adjuntamos anteriormente.

En el body

Ahora observemos cuál será el código HTML que necesitamos para implementar el destacado.
Todo el destacado está contenido en un bloque “highlight”, dentro de este aparecen 4 imágenes con sus respectivos links; estas serán las imágenes que irán rotando. Inmediatamente debajo de las imágenes tenemos un javascript con el que llamamos al método slider de la clasehighlight, este será el encargado de crear el slideshow. Se debe respetar la ubicación de este javascript, inmediatamente después de las imágenes y dentro del bloque contenedor, ya que necesitamos hacer la precarga de las imágenes, de lo contrario, las imágenes empezarán a cargar antes que se ejecute la función onLoad de cada una de ellas.
Luego aparece un bloque “navegation”, en dónde aparecen 4 párrafos con texto y un link dentro, cada uno de ellos corresponde a una imagen. Al final, tenemos un bloque “navegationbg” que únicamente lo utilizamos como background de la navegación, pudiéndole otorgar transparencia; esto permite que se puedan ver las imágenes de atrás.

Cuando llamamos al método slider pasamos tres parámetros, el ID del contenedor, el ID del bloque de la navegación y el tiempo en segundos que queremos que permanezcan las imágenes antes de pasar a la siguiente.

Hoja de estilos

La hoja de estilos externa “highlight.css” juega un papel muy importante, ya que será la encargada de dar diseño a nuestro slider. Ahí definimos las dimensiones del bloque principal, la ubicación y medida de los botones, el tipo y color de fuente de los textos, etc.

Este slider es flexible a tener distinta cantidad de imágenes, distintos tamaños, diferentes diseños y tamaños de botones, modificar los links de las imágenes y el tiempo de duración de las fotos.

Javascript no intrusivo

Una de las particularidades de este script es que NO es intrusivo; esto significa que el contenido se encuentra separado de los comportamientos, el javascript recorre el DOM de la página y especifica eventos sin la necesidad de llamar funciones desde el HTML.

Espero les resulte de utilidad y puedan implementarlo en vuestros sitios web.

Descargar archivos

También te recomendamos ver:
Carrusel de imágenes en javascript
Menú desplegable en javascript

Categoría: Tutoriales, Web

Publicado por: negro

Entradas más populares

58 Respuestas para “Slideshow en Javascript”

  • sirve para blogger?

  • He adaptado vuestro código a mi página web, me funciona en todos los navegadores menos con el explorer, ¿Qué puedo hacer?

  • ¿el efecto es el que aparece arriba antes del artículo? La verdad es que está muy muy chulo

    @Raquel¿funciona con todos menos con explorer? No me lo puedo creer.

  • tu slideshow no funciona en IE marca errores, incluso el de esta pagina

  • Podrían decirme en que versión de IE les está dando error?.. yo en IE 8 lo veo bien, pero seguramente lo estén viendo mal en IE 7 y/o 6. Comentenme así lo reviso para corregir los errores. Saludos!

  • Es una total lástima, no funciona con iexplorer, soy totalmente ingnorante en el tema, y no sé casi ni siquiera explicarte cuál es el error porq en la barra de estado no dice nada, solo puedo decirte q las imágenes no aparecen, siempre está la imagen gif, como circulito, q dá cono signo q se está cargando, pero nunca cambia. Si encontrás el problema avisame please :) ESTÁ BUENÍSIMO el slidershow, gracias!!!

  • Estimados, ya ha quedado solucionado para IE, era un pequeño detalle en el código javascript! Cuéntenme…
    Pueden verlo funcionando individualmente aquí

  • Una duda como puedo cambiar el diseño de esas barras en negro por circulitos o por otra cosa?

  • Hola Nevi, cada botón se traduce en el HTML como un

    (párrafo), por tanto lo que tu tienes que hacer es aplicarle estilos a estos

    dentro de la hoja de estilos (highlight.css”). Si tu lo que quieres es darle otro tipo de diseño más elaborado, te recomiendo colocarle la imagen de tu diseño de fondo a cada párrafo y que por encima aparezca el texto.

  • 10

  • ¿Qué es lo que queres cambiar?… seguramente haya alguna referencia en tus cambios que no está bien..

  • 12

    Los cambios que hago estan bien, esos no presentan problema, lo que le digo esque hay momentos cuando la pagina arranca que el “this.navegation = document.getElementById(nav);” no tiene ningun valor y por lo que entiendo esta buscando todos los TAG “a”, entonces cuando no lo encuentra arroja un error en la barra de estado del IE (estoy usando el 7 y el 8) y el click de los links deja de funcionar.

  • hola. felicitadiones por tu colaboracion y tu ayuda… el slide esta buenisimo… sera pasible realizar esto con puro css y html presindiendo del js. o bien sin tener q adherir archivos y q todo fuera directamente en la misma pagina. gracias. cualquier informacion es antipadamente agradacida… alex … alejandroa35@gmail.com

  • Hola Alex, este mismo slideshow es imposible realizarlo únicamente con CSS y HTML, ya que aparecen propiedades que no son inherentes a estos lenguajes. Cómo tiempo de espera en el pasaje de una foto a la otra, y la ejecución de funciones que generan las interacciones. Estos últimos sólo se contemplar con el uso de Javascript.

    Saludos

  • Hola Negro! primero que nada gracias por el aporte… siempre es bueno valorar cuando se comparten recursos útiles!
    Encontré tu codigo y me viene como anillo al dedo, lo estoy implementando en un nuevo desarrollo. Mi pregunta viene x un inconveniente=la ubicación de las capas. En Firefox salen desplazadas hacia la derecha (no sale en el centro de la página como debería quedar) mientras que en IE acabo de comprobar que sale perfecto. Cómo o de donde controlo la coordenada ‘horizontal’ de hubicación? O es que el codigo no es del todo compatible con ciertos navegadores? Probaré en el resto para ver que pasa.
    En cualquier caso, gracias adelantadas por tu tiempo y respuesta!
    Un saludo y que tengan buen día!
    alEx!

  • Ni caso Negro, di con el parámetro. Gracias!!!

  • [...] También te recomendamos ver: Carrusel de imágenes en javascript Slideshow en javascript [...]

  • Hola alEx! Sabes que luego de algunos comentarios de la gente, me asegure de corregirle algunas cositas y creí dejarlo funcionando para los distintos navegadores. Te animas a decirme exactamente que versión de navegador es la que no te lo muestra correctamente?

  • Hola:

    He tratado de insertarlo en una tienda de oscomerce y me sale desplazado a la derecha y sin idea de por que…

    Te paso la url: http://www.piscinasvictoria.com/tienda

    Gracias de antemano

  • Hola Miriam, indudablemente estás teniendo un conflicto con los estilos. Asegúrate primero de de vincular en el HTML la hoja de estilos siempre antes que el archivo javascript (js).
    Luego fíjate si en la hoja de estilos de tu sitio no hay ID o clases de css repetidas con este slide.
    En el peor de los casos que no puedas soucionarlo, puedes colocar un iframe, el cual levante un HTML el cual incluya únicamente los archivos del slide, tal y como aparece en este post. Suerte!

  • Hola, como puedo hacer para cambiar la ubicacion de la capa inferior de las miniaturas?

  • Buenas Tardes:

    Agradezco mucho por este slideshow ya que era exactamente lo que estaba buscando, ya lo implemente y me funciona a la perfección, solo necesito saber si quisiera cambiar el tiempo de transicion entre una imagen y la otra , ¿Que parte del javascript debo modificar?

    Muchas Gracias.

  • Hola Alex, me alegro que te haya sido de utilidad la librería. Para modificar el tiempo del script, lo que tienes que hacer es modificar la línea: this.time = t * 1000;
    El valor de 1000 equivale a 1 segundo = 1000 mili segundos.

    Saludos

  • Nico, la botonera inferior corresponde al id=”navegation”, que actualmente se encuentra con margin-top: 207px; si modificás el margin estarás cambiando la altura a la que se encuentre la misma; para modificar el ancho, tendrás que hacer que los párrafos pierdan la flotación y modificar también el ancho del DIV navegation.

    Saludos

  • Hola negro:

    Muy buen aporte, aunque le encuentro un defectillo. Cuando pones el puntero del ratón sobre la imagen grande este marca el anlace al que apunta, pero si no quitas el ratón de encima y la imagen cambia el enlace no lo hace (por lo tanto si haces clic vas a una página equivocada). Sería bueno que el show parase cuando pones el puntero del ratón sobre la imagen grande o bien que cambiara solo de enlace.

    A ver que nos dices. Un saludo

  • Hola Muchas gracias por tu aporte, lo implemente en una web y me funciono perfecto, pero tengo un detalle si quiero que aparescan dos de estos slides en mi web, es decir dos divs separados que contienen imagenes en rotación diferente, como debo implementarlo, para que los codigos no choquen?

  • Hola Mayra, no habría problema, para eso tu tienes que crear una nueva instancia del highlight en el header del documento, por ejemplo:

    var bitter = new highlight();

    Y al final, dónde ejecutas el actual, ejecutar el nuevo también pasando como parámetros, el ID del DIV del nuevo destacado, el ID del DIV de la navegación (botones) y el tiempo que quieres que demore cada foto:

    bitter.slider(‘highlight2′,’navegation2′,6);

    Espero te sirva de ayuda!

  • Hola de nuevo negro
    sobre mi pregunta anterior, al final seria posible hacer que pare el show cuando pones el puntero del ratón encima?

  • rodrigus, como va? hoy no está pensado para que tenga esa opción, la única manera sería programando!

  • Hola de nuevo negro, estoy dandole vueltas a lo de parar el show cuando el ratón pasa por encima de la imagen pero como voy un poco justo en el tema javascript me estoy volviendo loco.
    He conseguido alargar el tiempo entre foto y foto volviendo a llamar a la funcion onmouseover, pero hasta que no pasa ese tiempo no puedo volver a los 6 segundos que tiene por defecto.
    Se te ocurre alguna manera de hacerlo?

    Gracias

  • 31
    ricardo sanprieto

    Muchas gracias por compartir el código, lo he probado y funciona perfecto.

    Un saludo.

  • Me alegro que haya sido de utilidad!

  • Hola negro,
    Cómo has corregido el problema al darle F5 (actualizar) en Internet Explorer 7 y 8.

    Si descargo los archivos fuentes, se genera el problema, pero si lo veo en la página web que pusiste en el comentario #7, se ve muy bien, se le dan los F5′s que quieras y todo perfecto.

    En ese comentario #7 comentas que corregiste algo de programación, nos podrías decir qué es?

    Gracias desde ya!!!

  • Hola AlxBC , el problema estaba dado cuando las imágenes ya estaban cargadas, el Internet Explorer no reconocía la función onload. Por tanto agregue la propiedad complete para IE. Eso lo podes ver en el archivo “highlight.js” ahora; ya que se ve que el ZIP no estaba actualizado. Cuéntame!

  • Hola,
    Gracias por tu respuesta, pero te comento… ya bajé el zip actualizado y el problema sigue presentándose hasta en IE9, en Firefox trabaja de lujo.

    Mira, la primera vez abres el index.html y todo funciona muy bien, pero ya estando ahí le das F5 (claro, en IE), marca un error:

    ‘this.navegation’ es nulo o no es objeto (línea: 57, carácter: 3, Código: 0)

    Te mando un saludo, y espero tus comentarios

  • Estimado, yo lo he chequeado en IE6 y IE 7 y anda bien, proba entrar a esta URL y decime cómo lo ves y en que versiones de navegadores no te carga las imágenes correctamente.

    http://www.abcdisegno.com/archivos/blog/destacado/

  • Hola,
    Fijate que ahí en la URL jala bien, pero al descargar el archivo fuente de esa URL, y modifico en ese archivo fuente las 2 líneas siguientes para estar seguro que uso tu script y tu css, pero aún así sigue marcando el error cuando actualizas.

    En este instante estoy usando IE8. Saludos

  • upss, no me puso las líneas, pero la idea es:

    donde dice: highlight.css
    uso: http://www.abcdisegno.com/archivos/blog/destacado/highlight.css

    y donde dice: highlight.js
    uso: http://www.abcdisegno.com/archivos/blog/destacado/highlight.js

    Y el error me sale en la línea 57, caracter 3, del archivo “js” de tu URL

  • [...] En el header ? [...]

  • Hola,
    Gracias por el aporte, estoy intentando colocar el Slideshow en dos columnas en una misma pagina, y no carga la segunda columna, please ayudame, intente cambiar como le explicaste a Mayra pero no funciona.. Gracias

  • Hola Denise, efecivamete tienes que hacer lo que le explicaba a Mayra. Recuerda que aparte tienes que duplicar en el HTML los DIV del destacado y asignarle distintos nombres de ID. Cuéntame!

  • Hola amigo…

    Está muy bueno, muchas gracias. Una pregunta tengo: en una pantalla con 1024 px lo ubiqué perfectamente… pero cuando le cambio la configuración a la pantalla o lo veo en otro computador con otra resolución de pantalla se correo el slide y no queda donde quería… como hago para dejarlo fijo independientemente del tamaño de la pantalla?

    Muchas gracias!!!!!

  • Hola Carlos, el bloque que debes ubicar a gusto es:

    Por lo que dices, necesitas que se reubique en el lugar que quieres, si quieres que esté alineado a la izqueirda, no haces nada, simplemente lo ubicas dentro del DIV que tengas como contenedor, si quieres que aparezca centrado, debes agregarle margin: 0 auto; al ID #highlight dentro del CSS

    Saludos

  • Fantástico. Lo he implementado con mysql y va muy bien.

    Agradecido

  • en caso de querer poner mas de 4 imágenes, me podría funcionar?, saludos.

  • Hola Gustavo! Si funciona, sólo debes agregar una imagen más de las grandes y un nuevo párrafo que funcione como botón dentro del HTML. Saludos

  • Hola de nuevo Negro:

    Estoy intentando pulir un poco mi web y en la validación CSS3 da varios errorres en este slide:

    #highlight img Error de análisis sintáctico opacity=0)
    #highlight img La propiedad -moz-opacity no existe : 0
    #highlight .navegationbg Error de análisis sintáctico opacity=80)
    #highlight .navegationbg La propiedad -moz-opacity no existe : 0.8
    #highlight #navegation p La propiedad _width no existe : 147px
    #highlight #navegation p a La propiedad _padding no existe : 5px 0 0 5px
    #highlight #navegation p a La propiedad _width no existe : 131px

    Sería posible conseguir validar este css?

    Un saludo

  • Hola Negro,

    estoy intentano usar el codigo, pero se traba. Cuando carga la pagina pasa de una foto a otra y luego queda ahi,no sigue con el resto, lo estoy usando en chrome. Alguna idea?

  • Hola Ana … entra a la URL del ejemplo en Chrome y fijate como te funciona, a mi me anda bien.
    http://www.abcdisegno.com/archivos/blog/destacado/

    Seguramente te esté faltando algo, o se te paso algo cuando personalizaste tus imágenes o textos. Descargate el original y compara línea por línea del HTML.

  • Rodigus, efectivamente vas a encontrar advertencias de validación, pero esas propiedades las necesitás para que te funcione correctamente en las distintas versiones de IE.

    La validación aveces es importante y aveces no, no te preocupes por eso!

  • buen slideshow, pero hay alguna forma de cambiar la variable img por un div, para poder agregar información aparte de la imagen…lo intenté de varias formas pero no lo logré. (algo como lo aparece en el display de http://molecula.cl/.
    Gracias.

  • Hola José! Este slideshow no está armadado para contemplar esa funcionalidad, habría que hacer varias modificaciones. De todas maneras, este otro slider si te permite agregar textos en un bloque … http://www.abcdisegno.com/slider-con-jquery/

  • ola negro!!!

    me encanta este slideshow y mas aun si pudiese colocarlo en un proyecto que tengo que hacer para mi clase de sistemas me preguntaba si me podrías ayudar de una forma mas para novatos ya que lo intente y mas perdida no pude haber quedado cuando descargue los códigos pude cambiarle la fuente los nombres y las imágenes pero no pude con la ubicación vi tu respuesta a nico y menos pude si me podrias guiar en esta ocasion te lo agradeseria demasiado

  • Que tal Kamila!.. tu te refieres a ubicar el slider centrado, a la izquierda o a la derecha?.. u otro tipo de ubicación?

  • ola negro!!!

    la ubicación seria centrado derecho como por esta parte
    IIIIIIIIIIIIIIIIIIIIIIII
    ——————————>I I
    ——————————>I I
    ——————————>I I
    IIIIIIIIIIIIIIIIIIIIIII
    serian dos slideshow uno debajo del otro muchísimas gracias te lo agradezco demasiado

  • Kamila, para reposicionar el slider, tenes que ubicar el DIV principal con la hoja de estilos, en el archivo highlight.css editas esta línea…

    #highlight { width: 550px; height: 256px;…

    Podes meter este DIV dentro de otro DIV ya posicionado, o flotar este bloque a la derecha o la izquierda… float: left; float: right; o dar margin: 20px etc…

    Si quieres sube lo que hayas hecho y lo miro!

    Saludos

  • Muy buen Aporte, sin embargo tengo el mismo problema que Fernando Rueda y AlxBC, el cual es que al momento de abrir la pagina todo bien pero luego al presionar F5 manda un error en la línea 57, caracter 3, this navegation is null or not an object. por favor agradeceria puedas colgar los archivos actualizados a fin de poder solucionar ese inconveniente (actualmente me encuentro utilizando IE8), o que hiciste en el codigo para que todo cargara correctamente

    Muchas Gracias,

  • this is a very useful web site!

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>