JMiur [E]

Este es uno de los slideshows, sliders o rotadores de imágenes más simples de implementar que he visto últimamente, requiere el uso de jQuery y se llama Automatic Image Rotator.

En la página de los desarrolladores hay información abundante respecto a los detalles y una explicación clara de su funcionamiento pero, de todas maneras, para quien simplemente quiera copiar y pegar, las cosas son sencilla.

El HTML que va allí donde uno quiera mostrarlo, es un DIV donde hay dos contenedores, en el primero iran las imágenes y en el segundo los números que son los que controla, el slider:
<div class="main_view">
  <div class="window">
    <div class="image_reel">
      <a href="#"><img src="URL_IMAGEN_1.jpg" /></a>
      <a href="#"><img src="URL_IMAGEN_2" /></a>
      <a href="#"><img src="URL_IMAGEN_3" /></a>
    </div>
  </div>
  <div class="paging">
    <a href="#" rel="1">1</a>
      <a href="#" rel="2">2</a>
      <a href="#" rel="3">3</a>
  </div>
</div>
No hay limitaciones en cuanto a la cantidad de imágenes así que pueden agregarse todas las que se quiera.

Ahora el script..

Obviamente, debemos tener jQuery agregado en el head de nuestra página:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y debajo, el plugin que funcionará cuando se haya cargado la página:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $(".paging").show();
  $(".paging a:first").addClass("active");
  var imageWidth = $(".window").width();
  var imageSum = $(".image_reel img").size();
  var imageReelWidth = imageWidth * imageSum;
  $(".image_reel").css({'width' : imageReelWidth});
  rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({left: -image_reelPosition}, 500 );
  }; 
  rotateSwitch = function(){
    play = setInterval(function(){
      $active = $('.paging a.active').next();
      if ( $active.length === 0) {$active = $('.paging a:first');}
      rotate();
    }, 7000); // este es el valor que define la velocidad (7 segundos)
  };
  rotateSwitch();
  $(".image_reel a").hover(function() {clearInterval(play);}, function() {rotateSwitch();});
  $(".paging a").click(function() {$active = $(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>

Un poco de CSS y eso es todo:
<style>
  .main_view { /* el contendor principal */
    position: relative;
  }
  .window {  /* el contendor con las imágenes */
    overflow: hidden;
    position: relative;
    /* debemos dimensionarlo */
    height: 175px;
    width: 550px;
  }
  .image_reel { left: 0; position: absolute; top: 0; }
  .image_reel img {
    float: left;
    /* conviene dimensionarlas */
    height: 175px;
    width: 550px;
  }
  .paging { /* la navegación a gusto de cada uno */
    background-color: rgba(146, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#80920000);
    zoom: 1;
    border-radius: 4px;
    bottom: 10px;
    display: none;
    height: 42px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 178px;
    z-index: 100;
  }
  .paging a { /* los números */
    color: #FFF;
    font-size: 20px;
    padding: 5px;
    text-decoration: none;
  }
  .paging a.active {
    background: #920000;
    border: 1px solid #610000;
    border-radius: 3px;
    font-weight: bold;
  }
  .paging a:hover { font-weight: bold; }
</style>

35 comentarios:

Inmortal  

¿Alguna forma de usarlo si tengo Scriptaculous?

Tengo entendido que entran en conflictos.

Tienes alguna entrada que explique ¿como usar Jquery y Scriptaculous?
Veo que usas ambnos Scripts aqui en tu Blog.

Responder
Unknown  

Estoy probando con las otras que explicas, sin jQuery ni Scriptaculous.

Responder
Unknown  

Hola JMIur... Para comentar en tu blog debo usar los comentarios al viejo estilo de Blogger, ya que no carga el formulario de comentarios incrustados, además el buscador de tu blog tampoco me funciona. Esto me pasa desde hace días y no tengo ninguna explicación.

Por otra parte, en mi blog tampoco puedo publicar nuevas entradas ni editar las que ya están publicadas.

No sé si Blogger este presentando problemas pero es algo un poco complicado.

Responder
ePulido  

Uuuyyyshhh! qué fácil y qué bien queda :D :D :D Muchísimas gracias!

Responder
JMiur  

GuillermoVM:
Existen algunas alternativas si buscas en la web pero, no lo recomiendo en absoluto ya que cargar dos librerías es un exceso.
En el caso de este blog, todo eso se muestra a través de un blog auxiliar que contiene los demos.

Graciela:
Me parece perfecto, lo mejor es no usar ninguna librería y jugar :D

Víctor González:
No veo nada de eso. No veo que haya problemas. Deberías borrar la cache´del navegador para limpiar cualquier error que haya quedado flotando.

abalorium2punto0:
Oh sí, esta es fácil de verdad :D

Responder
estrategia  

buenos días Vagabundia

muchas gracias por su ayuda, yo quiero preguntarle si es posible mostrar como usted cosas de una entrada pero en la sidebar, como la entrada donde usted muestra como poner enlaces de una entrada en un gadget, pero como se hace para mostrar digamos las etiquetas en lista y tambien como se hace para poder mostrar entradas relacionadas pues yo me he dado cuenta cuando voy a una de sus entradas que en el sidebar tiene unos gadgets de entradas relacionadas y es muy bonito y entonces yo me pregunto si yo podria aprender cosas así, gracias y gracias de nuevo por su ayuda y este es un muy bello blog, me gusta bastante!!!!

Responder
JMiur  

Puedes fijarte en las entradas con la etiqueta Json. Allí hay varias de esas cosas explciadas como estas: 1 | 2

Responder
waiki  

Hola Jmiur quisiera preguntarte si en ese ejemplo que has colocado se puede agregar un funcionamiento en el cual vayan pasando uno por uno?
lo digo porque ahora es comun ver varias paginas web con ese tipo de sistema. y me gustaria agregar uno asi.

Responder
waiki  

ups, perdona mi inocencia... si esta activado eso. disculpa y ya no es necesario que me des la respuesta. gracias

Responder
jsstoni  

oye a mi no me funciona q raro :S

Responder
JMiur  

Revisa lo que has hecho o explica un poco más, sino, ¿de que sirve comentar?

Responder
jsstoni  

Es que pongo el codigo que dejas en el post pero al abrir el HTML solo se ve una imagen no se ven los botones rojos ni rotan las imagenes.!

Responder
JMiur  

¿Y dónde está el ejemplo?

Responder
Porker Fake  

Me rindo.
Suelo leer detenidamente todos los tutoriales e intento no preguntar al primer primer inconveniente que tengo y propongo indagar en la cuestión hasta lograr una solución y aprender del error, pero en este caso no encuentro salida.
He intentado insertar este slide, la plantilla que estoy editando sin éxito. Luego de deducir que había librerías que entraban en conflicto, recurrí a insertarlo iframe mediante un blog auxiliar, pero a la hora de visualizarlo en el mismo obtengo el mismo error.

Entrada a mi proyecto de blog:

http://srclatino.blogspot.com/2011/07/s.html

Entrada del blog auxiliar:

http://srclatinoiframe.blogspot.com/2011/07/d.html

Espero que me puedas dar una solución o al menos indicarme donde se halla el problema ya que no doy con él.
Muchísimas gracias por todo tu trabajo y espero no resulte molestia mi consulta.

Responder
JMiur  

Dos cosas. Primero, tal vez ayude que en tu ejemplo, agregues float:left acá:
.main_view {
float: left;
position: relative;
}

Segundo, elimina los saltos de línea de los enlaces con los números; colócalos todos en una sola línea; eso, resolvería el problema.

Responder
Cocina  

Hola!estoy tratando de encontrar donde esta mi falla pero no doy con la solucion,funciona perfecto pero los numeros se ven en la sidebar,puedes verlo aqui http://usodepruebas-cocofansclub.blogspot.com/
veo que a abalorium2punto0 (comentario 4) tambien le ha quedado asi.
espero puedas ayudarme
Saludos!

Responder
JMiur  

Cocofansclub:

Establece la regla de estilo para el contenedor, agregando esto:

.main_view {
height: 175px;
position: relative;
width: 550px;
}

position: relative; es lo que hará que los números queden dentro y no fuera
width y height los dimensionas igual que a la imagenes y así nada desborda

Responder
Cocina  

JMiur!Muchisimas gracias todo solucionado!;quedo perfecto segui tus indicaciones y resulto.
saluditos!

Responder
JMiur  

Perfecto, me alegra que funcionara :D

Responder
Rousse  

Y cómo hago para poner un link a las imágenes?
Gracias por el tuto! A mi me funciona bien ;)

Saludos!

Responder
JMiur  

Las imágenes son enlaces por lo tanto, bastaría poner allí la dirección:

<a href="DIRECCION"><img src="URL_IMAGEN_1.jpg" /&ft;</a>

Responder
Vero Rodriguez  

Hola En donde debo pegar todo eso si quiro tener el image rotator en la cabecera? que voy a dividir en dos,Muchas Gracias

JMiur  

El script y los stilos antes de </head> y el HTML allí donde quieras que se vea, si en en el header, agrega un elemento HTML al header y lo pones allí.

Vero Rodriguez  

buenisimo! gracias, ya me quedo en la cabecera. Pero como puse 32 imagenes quiero eliminar los botoncitos porq son demasiados ¿que deberia borrar?. Ademas me queda sobresaliendo de su ubicación como puedo centrarla o traerlo mas al centro de la cabecera? asi miráhttp://probandoparanohacermacana.blogspot.com/

JMiur  

Lo que sobresale lo resuelves reduciendo el ancho que en este momento está en la regla .window {} y dice width:550px; coloca un valor menor.

Para no cambiar el script y que no se muestren los números, ocúultalos así:

.paging {display:none;}

Responder
tazcre  

No me funciona en IE

JMiur  

No veo que tenga ningún problema en IE

Responder
Unknown  

Hola, al copiar el código del plugin, me aparece un error en la penúltima línea de código.
Exactamente al aquí: //]]>
Si ejecuto el código en chrome, por ejemplo, simplemente me aparece la primera imagen que he puesto, y no se mueve ni nada.
Un saludo, y muy buen trabajo!

JMiur  

¿Dónde esta tu ejemplo para verlo online?

Responder
Unknown  

Hay alguna forma de llamar al script Jquery desde un archivo Js ? así no queda todo en el mismo HTML.

Saludos.-

JMiur  

No entiendo la pregunta.

Responder
249543  

estimado..en que archivo se agrega el style CSS?

JMiur  

Si es en Blogger, allí no hay archivos así que lo agregas directamente en la plantilla.

249543  

y en el caso de wordpress?

JMiur  

Dependerá de la estructura que tenga el theme que esté empleando. En principio, en el archivo style.css.

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