Cómo crear un slideshow para nuestros sitios Web
Quizás el término “slideshow” sea algo desconocido para muchos. Cuando hablamos de eso, nos referimos a un set de diapositivas animadas, dentro de las cuales podemos incluir imágenes, que van rotando con el paso de un tiempo determinado.
Esta sin duda es una inclusión muy atractiva que podemos hacer en nuestros sitios Web si tenemos contenido que quisiéramos desplegar de esa forma. Pues bien, hoy, en CLH, les traemos una sencilla forma de aplicarlos en sus páginas Web mediante el uso de librerías de carga rápida y que les entregarán un efecto sólido para sus visitantes.
Todo el detalle, como siempre, después del salto.
Cómo crear un slideshow para nuestros sitios Web
Como siempre, lo primero:
Implementos necesarios:
- Un editor Web, aunque de cualquier forma si no poseemos podemos utilizar block de notas. Como siempre, recomendamos, Adobe Dreamweaver, el cual pueden descargar desde este enlace.
Para esto nos apoyaremos en la librería JQuery y en un simple script llamado Simple Slideshow, el cual no es necesario descargar, ya que lo incluiremos en el código final de este ejemplo.
Procedimiento:
1.-Lo primero que hacemos será crear un nuevo archivo HTML y lo llamamos como queramos. Para este tutorial, lo hemos llamado ejemplo.html
2.- A continuación, hacemos todos los ajustes que queramos con respecto al título de la página y estilo de esta (color de fondo, márgenes, etc.).
3.- Luego, justo después de cerrar la etiqueta <TITLE> y antes de cerrar la etiqueta <HEAD>, insertaremos el siguiente código, correspondiente a los ajustes de CSS que se realizarán sobre el slideshow:
<style type=”text/css”>
ul.ppt {
position: relative;
}.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>
4.- A continuación, luego de abrir la etiqueta BODY, crearemos una lista no ordenada con elementos Li. Cada uno de estos elementos contendrá la ruta de una de las imágenes que queremos desplegar en nuestro Slideshow. En nuestro caso mostraremos las siguientes imágenes:
Entonces, nuestro código quedaría de la siguiente forma, justo después de abrir la etiqueta BODY:
<ul class=”ppt”>
<li><img src=”nombre de la imagen 1.extensión” alt=”descripción 1″></img></li>
<li><img src=”nombre de la imagen 2.extensión” alt=”descripción 2″></img></li>
<li><img src=”nombre de la imagen 3.extensión” alt=”descripción 3″></img></li>
</ul>
Como podemos ver, el elemento de lista no ordenada (ul) hace un llamado al estilo ppt definido en nuestro CSS más arriba y luego listamos las imágenes que pondremos con sus respectivas descripciones.
5.- Luego, insertaremos el código que hará el llamado a la librería JQuery para hacer los efectos correspondientes. Este código lo ponemos a continuación del anterior y no es necesario modificarlo:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(‘.ppt li:gt(0)’).hide();
$(‘.ppt li:last’).addClass(‘last’);
var cur = $(‘.ppt li:first’);function animate() {
cur.fadeOut( 1000 );
if ( cur.attr(‘class’) == ‘last’ )
cur = $(‘.ppt li:first’);
else
cur = cur.next();
cur.fadeIn( 1000 );
}$(function() {
setInterval( “animate()”, 5000 );
} );
</script>
6.- Guardamos nuestro HTML asegurándonos que las imágenes se encuentren en la misma ruta y abrimos el archivo en nuestro navegador favorito.
Para ver como queda el ejemplo, pueden ver este enlace.
Como podemos ver, hemos obtenido un muy buen resultado basándonos en librerías bastante livianas para ejecutar en nuestros sitios Web y de esta forma podemos ofrecer un contenido muy atractivo a nuestros visitantes.
Los instamos a probar distintas formas de aplicar estos slideshows y acomodarlos a sus propias necesidades, como se puede ver, el código es muy simple y no requiere mayores conocimientos ni ajustes.
Como siempre, recuerden que este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
Staff CLH
Tutoriales relacionados:
- Cómo crear una ventana modal en tus sitios Web
- Cómo crear una galería de imágenes para tu Web
- Cómo estilizar los formularios de nuestros sitios Web
- Cómo crear un contador de caracteres para tus formularios
- Cómo hacer un formulario de ingreso desplegable
(1 votos, promedio: 5.00 de 5)
Loading ...
Escrito por Xabadu
Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.
22 Comentarios a “ Cómo crear un slideshow para nuestros sitios Web ”
Comenta
Ta wenísimo, me gusto mil….
Sos un Crá del dringüiber.
Un abrazo!!!!
De pelícanos!… estos efectos son rápidos y efectivos!, gracias @xabadu.
No pude ver el ejemplo, esta mal programada, en el explorer 6 tira error y no funciona y en el firefox tampoco hace nada. No se q pasó.
@Nicolas: Este ejemplo lo probamos en Firefox y no hubo problemas. IE 6 siempre lanza errores al reproducir algunos contenidos, sobretodo cuando hablamos de transparencias y efectos. Una solución es aplicar iepngfix, o la mejor y más recomendable, actualizar. IE ya va en la versión 8 por lo que nunca es recomendable usar una versión de tan atrás.
Saludos
Hay q pensar en todos los usuarios en internet, todavia hay gente q usa las versiones viejas, porq se rehusa a actualizar o a cambiar de navegador, etc. Cuando se diseñan webs hay q probar en todos los navegadores y q funcione 100 por 100 en todos, esa es mi opinion. Saludos
no funciona porque están mal puesto las comillas (están en otro formato.)….
yo no puedo descargar adobe Dreamweaver
como la ago para descargarlo
por favor en verdad lo necesito
MIREN SI NO LES FUNCIONA ES PORQUE COMO LO DIJERON ANTERIORMENT E LAS COMILLAS ESTAN EN OTRO FORMATO.
SOLUCION, ENTRA AL DOCUMENTO, DEL MENU EDICION PON EDITAR Y LUEGO REEMPLAZAR, REEMPLAZA LA COMILLA ACTUAL POR LA SIGUIENTE “ SI TIENES DUDAS ESCRIBE EN ESTE FORO Y YO TE CONTESTO…
Coincido con Sergio, asegúrense siempre que al copiar y pegar el código en el Dreamweaver las comillas no se alteran. En general, todas (simples o dobles) se pegan oblicuas y deben pasarlas manualmente (o con Find+Replace) a comillas rectas.
Ese sutil cambio en las comillas puede hacer que funcione todo perfecto o se vuelva un terrible desastre. Confíen, me ha pasado! Jajaja!
Gracias por otro muy buen tutorial!
Funciona
pero hay que cambiarle las comillas….nada mas que eso.
saludos!
Luego de varias pruebas y leyendo los comentarios pude lograr echar a correr y funciona.
Gracias
Harto tiempo después de publicado lo vi y funciona espectacular!. Busqué por caleta de páginas, me costó encontrarlo, pero estaba aquí donde siempre!, no sé por qué no pasé por acá primero!. Gracias!
Funciona perfecto, yo que de html no tengo mucha idea.
Gracias.
Genial, funciona impecable… para todos los que no les resulte, revisen muy bien las comillas. Solo porque no aparece explicitado, si lo quieren poner en algun lugar especifico de la pagina, solo copian la 2da y tercera parte en donde lo deseen, en mi caso dentro de una tabla.
Buenas no me funciona me salen las imagenes en vertical y entre medias el punto de la lista he cambiado las comillas dobles por las comillas dobles rectas y las comillas simple por comillas simples recta aun así no me va…
ayuda
Buen aporte
solo que le tube que modificar unas cositas por que esta mal el codigo checa tu blog, por que al poner el code salen otros simbolos 
gracias
Estimado el link esta roto!
estimado me sirvio de mucho tu ayuda para crear el slide, aunque como todos dicen , hay que cambiar las comillas dobles y simples para que funcione el ejemplo, pero buen aporte, gracias
waaaa está la raja, seria choriflai si pudieras poner botoncitos abajos pa poder adelantar cada imagen alhacerle click, pero independiente de eso, está BUENO BONITO Y BARATO, Y SIMPLE
NO ME SALE NI PUTA MADRE QUE ALGUIEN ME EXPLIQUE
COÑO, DE PUTISIMA MADRE!!! YA ME SALIO , ES LA PUTA MADRE !!!! GRACIAS CABRONAZO HIJO E`PUTA!!!!!!
Wow, muy accesible. Pude adaptarlo y tomar las imagenes de una base de datos. Muchas gracias!