Para un par de sitios (aún no los lanzamos así que una vez que lo hagamos lo agrego al post) necesitábamos que existiera una transición de imágenes con un fade, algo bien simple, por lo que me puse a buscar un buen plugin de jQuery, pero nada era lo suficientemente simple y limpio, por lo que buscando encontre un muy buen post para construir uno, lo tomé como base y lo arreglé un poco para poder configurar el tiempo entre transiciones, el tiempo que dure el difumado y no tener que agregar css, quedando así:
jQuery.SimpleSlide.js en GitHub/** * * Copyright (c) 2010 Pedro Fuentes ( http://pedrofuent.es ) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * **/ jQuery.fn.simpleSlide = function(a){ a = a || {}; a.duration = a.duration || 5000; a.transition = a.transition || 1000; a.stopAt = a.stopAt || false; a.element = a.element || "img"; var c = $(this); $(c).css("position","relative"); $(a.element,$(c)) .css({ 'position' : 'absolute', 'top' : '0px', 'left' : '0px', 'z-index' : '8' }) .find(":first") .addClass("slide-active") .css('z-index','10'); var cnt = 0; var interval = setInterval(function(){ if(!isNaN(a.stopAt)){ cnt++; if(cnt==a.stopAt){ clearTimeout(interval); } } var $active = $(a.element+".slide-active",$(c)); if($active.length == 0) $active = $(a.element+":last",$(c)); var $next = $active.next().length ? $active.next() : $(a.element+":first",$(c)); $active .addClass("slide-last-active") .css('z-index','9'); $next .css({opacity: 0.0}) .addClass("slide-active") .css('z-index','10') .animate({opacity: 1.0}, a.transition, function(){ $active .removeClass('slide-active slide-last-active') .css('z-index','8'); }); }, a.duration); }¿Como funciona? Simple, un contenedor (ej. un div) y dentro una lista de imágenes:
<div id="contenedor"> <img src="imagen_1.jpg" alt="Imagen 1" /> <img src="imagen_2.jpg" alt="Imagen 2" /> <img src="imagen_3.jpg" alt="Imagen 3" /> <img src="imagen_4.jpg" alt="Imagen 4" /> <img src="imagen_5.jpg" alt="Imagen 5" /></div>y obviamente con jQuery previamente cargado
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>para que se inicie la transición cuando cargue la página
$(document).ready(function(){ $("#contenedor").simpleSlide(); });si quieren configurar el tiempo en que demora en iniciar la nueva transición (duration) o el tiempo que dura el efecto (transition) deberían llamarlo así
$(document).ready(function(){ $("#contenedor").simpleSlide({duration:5000,transition:1000}); });Un pequeño hack (que no he probado) para, como pidió "javi" en los comentarios, detenerlo, en este caso luego de la cantidad de veces seteadas Si quisieramos que se detuviera luego de mostrar 5 imágenes
$(document).ready(function(){ $("#contenedor").simpleSlide({stopAt:5}); });Y ahora según lo que pide @SAM podemos seleccionar el elemento, en su caso quiere que las imágenes tengan link por lo que la lista de imágenes ahora se vería:
<div id="contenedor"> <a href="#1"><img src="imagen_1.jpg" alt="Imagen 1" /></a> <a href="#2"><img src="imagen_2.jpg" alt="Imagen 2" /></a> <a href="#3"><img src="imagen_3.jpg" alt="Imagen 3" /></a> <a href="#4"><img src="imagen_4.jpg" alt="Imagen 4" /></a> <a href="#5"><img src="imagen_5.jpg" alt="Imagen 5" /></a></div>Ya el elemento no es la imagen (img) si no que el link (a)
$(document).ready(function(){ $("#contenedor").simpleSlide({element:"a"}); });
el mejor que he visto navegando por internet, sencillo y muy efectivo, muchas gracias!
tengo el mismo problema que tubiste, y cuando ya estaba decido a crear uno justamente te encuentro jajajaj, y encima es justamente lo que buscaba, lo adecuare a lo que quiero hacer.
gracias.
porque siempre explican las cosas como si todo mundo supiéramos de que hablan, a veces quisiera encontrar algo que expliquen paso a paso, digo se agradece la información, pero siento que me quedé igual
y se puede hacer que cuando llegue a la última imagen se pare?
Esta muy bien logrado, aunque para algo tan sencillo yo no habría usado tremenda librería (jQuery) a menos que ya la estes utilizando por alguna otra cosa en el sitio.
Si necesitabas un simple slide, que mejor que hacerlo en flash??? Simple, efectivo, 100000 veces más personalizable, etc etc etc.
@javi
si se puede hay que cambiar la función setInterval por un simple for voy a agregar una modificación al post para lo que quieres, espero aún esté a tiempo de ser útil.
@federico
jQuery, es una libería relativamente livian (24KB), y flash para quienes no lo manejan resulta aún más complejo, de todas formas la librería la uso en casi todos los sitios, gracias por el comentario !
Gracias, esto si que es eficacia, adaptas el plugin a mi medida, que lujazo!! así da gusto.
Volveré… (jeje)
Un consulta si kisiera ponerle un tiempo de permanencia para cada imagen como podria hacerlo
Gracias
@ROnald ya viene en el plugin.
duration: define cuanto tiempo la imagen permanece
transition: define cuanto tiempo demora la transición
por ejemplo si quieres que la imagen permanezca 3 segundos:
$(“#contenedor”).simpleSlide({duration:3000});
Hola Pedro
Soy diseñador y no se como guardar el primer codigo que pones en lista. si se guarda todo en block de notas con extension .js, que nombre se le pone y desde donde se le llama dentro del .html.
Y este codigo:
$(document).ready(function(){ $(“#contenedor”).simpleSlide({duration:5000,transition:1000}); });
¿Donde se pone?
Agradecido por tu pronta respuesta.
Saludos
Como puedo hacer para centrar el contenedor sin importar el tamaño de la ventana? text-aling:center no funciona. Gracias, excelente.
Pavel,
Guardas todo en un archivo .js el nombre no es relevante.
Tienes que llamar a ese archivo y la librería jquery dentro de tu html y luego dentro de una etiqueta
Enrique,
el contenedor se puede centrar de distintas formas dependiendo de como estás armando el layout, una forma es utilizando:
margin: 0 auto 0 auto;
Flash vs jQuery?
Este script funciona en moviles (o por lo menos en BB), Flash ni de chiste.
Flash va de salida, creeme, el html5 y librerias como jQuery ya lo hacen obsoleto
En estos tiempos hay que pensar en los moviles, en los buscadores, en la ligereza de los sitios, en ninguna aplica bien el flash, ademas, imaginate que tengas que cambiar 1 imagen… tienes que editar el archivo fuente, generar el swf y volver a subir el archivo, 3 pasos, aca nada mas cambias la imagen directamente en el html y la subes, ademas no creo que en flash quedara mas ligera la transicion…
Digo, esta bien que sigan usando flash, pero en la medida que puedan evitenlo en sitios a desarrollar para adelante, aprendas las nuevas tecnologias y animense a dejar las antiguas… si no saben hacerlo mas que con flash lean, vean sitios como http://www.haciendadelcipres.com/corporativo... cero flash, solo lo usan para la musiquilla, lo demas es jquery en la portada
saludos
Una pregunta,
Y cómo hacer para ponerle a cada imagen un link diferente???
Gracias !!
Saludos
Hey JAM si no sabes código as, no hables del flash, la ventaja más clara de javascript es su visialización en móviles.
En flash se puede crear un .swf que pese 1 kb, y adentro llamo a un sin número de imágenes , le puedo crear una imagen de cargador dinámicamente al igual que una transición, links pantalla completa, etc , y llamar a cada imagen con un archivo xml.
Hola Pedro,
Genial el código !!! Pude hacerlo funcionar aunque no se nada de programación jQuery.
Pregunta: Cómo puedo hacer para que cada slide permanezca un tiempo diferente? Por ejemplo Slide1 3 seg, Slide2 10 seg, Slide3 5 seg…
Saludos desde Uruguay