Animaciones Web CSS Diseño Web Efectos Galeria HTML JQuery Programacion Slideshow
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.
Como siempre, lo primero:
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.
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.
4:27:36 pm
Buenas, Pues a mi me sigue sin funcionar… le he sustituido las comillas y tal, y lo he dejado sin errores de sintaxis (al menos así me lo indica el DW) pero cuando lo abro en el navegador (Chrome) no me hace nada, me saca las tres imágenes en una lista. ¿Alguna idea de qué puede ser?
Gracias
6:10:07 pm
me marca error en una linea
8:12:07 pm
Hola,
He copiado todos los códigos, cambiando las comillas, etc
En el navegador me aparecen las imágenes todas amontonadas una sobre otra, pero no hay slide, ¿donde puedo haber cometido algún error?
Gracias!!!
12:32:20 pm
EXCELENTE AMIGOS, GRACIAS POR EL SCIPT Y POR EL APOYO DE OTROS PARA LA ACLARACION DE LAS COMILLAS.
FUNIONA AL 100 🙂
10:08:52 am
Ya le cambie las comillas pero aun no se visualiza, que pasa?
5:21:44 pm
Perfecto colega, me ahorraste programas y diseños que no salian para nada, me puse a estudiar programas y a diseñar y a las finales con un par de códigos bastó, te mereces un 10 🙂
10:36:08 pm
Mil gracias por el codigo, muy bien explicado y completamente funcional. Los felicito por sus aportaciones.
9:57:21 pm
me encanto muchas gracias fACIL Y UTIL
5:41:25 pm
EXELENTE FUNCIONA CALIDA GRACIAS
8:19:55 pm
Excelente aporte, funciona de maravilla…. Sólo una pregunta… cómo puedo hacerle para ponerle botones para que el usuario pueda explorar el slider? ya sea 3 botones en la parte de abajo o flechas en las orillas de la imagen para que lo pueda recorrer manualmente?. Gracias y saludos