JMiur [E]

Tiny Circleslider es un pequeño plugin para jQuery que genera un carrusel de imágenes circular.

No es nada complicado de utilizar tal como muestran en el ejemplo que podemos descargar pero, a la hora de personalizarlo, hay que emplear mucha aritmética. Todos esos detalles pueden verse en la página del autor así que me limito a mostrar lo elemental.

Obviamente necesitamos tener la librería agregada en el head de nuestra plantilla:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
Y luego, el script del plugin que podemos agregar, copiando el contenido del archivo jquery.tinycircleslider.min.js y pegándolo de este modo:
<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>
Nos faltaría el CSS que ponemos debajo y que requiere el uso de tres imágenes que podemos descargar y alojar en el mismo Blogger: bg-rotatescroll.png, bg-rotatescroll2.png, bg-thumb.png:
<style>
  #rotatescroll { /* es el rectángulo contenedor */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* es el rectángulo que contiene las imágenes */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* es la lista con las imágenes */
    left: 0;
    list-style: none; 
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* cada item de la lista */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* la imagen con el círculo se superpone a la lista */
    background: transparent url(URL_bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* el círculo rojo que nos permite navegar */
    background:transparent url(URL_bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* los puntos que indican ca posición de cada imagen */
    background: transparent url(URL_bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* permanecen ocultos por defecto */
    display: none;
  }
</style>
Ahora, el HTML que colocamos donde vayamos a mostrar el carrusel donde, las imágenes pueden ser enlaces o no:
<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="URL:imagen1" /></li>
      <li><img src="URL:imagen2" /></li>
      <li><img src="URL:imagen3" /></li>
      <li><img src="URL:imagen4" /></li>
      <li><img src="URL:imagen5" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>
Eso es todo, y bastaría activar la función agregando algo así debajo del HTML:
<script type="text/javascript">
  $(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>
Algunas opciones extras permiten definir si funcionará como un slideshow automático:
$('#rotatescroll').tinycircleslider({ interval: true });
y hay otras opciones que se agregan, separándolas por comas:

snaptodots true si se mostrarán los puntos cuando se arrastran (por defecto es false)
hidedots false si no queremos que se muestren los puntos internos (por defecto es true)
intervaltim es el tiempo entre slides (por defecto 3500)
radius define el tamaño del círculo (por defecto es 140)

9 comentarios:

Web Designer  

cool!!

Responder
Adrián J. Messina  

Extremadamente original, vale la pena el esfuerzo de probarlo.
Una genialidad.

Responder
Gem@  

Pues me ha gustado, jQuery conquista a la gente :)

Responder
La hormiguita  

Que simpático y fuí a la página y me encantó!!!! para cuando tenga tiempo
;)

Responder
La hormiguita  

De cuanto son las fotos????
Me gustó, para cuando tenga tiempo.Sigo sumando jajajajaja

Responder
Emerald  

:D como siempre, cosita q pones cosita q hay q probar!!!jajajaj esta muy bueno, veo si me sale.
Abrazo

Responder
JMiur  

Prueben, nomás. No es muy difcíl aunque si uno quiere personalizarlo, las cosas se complican un poco.

Responder
Karla Castañeda  

Jeje... :$, creo que este es uno de los casos en los que se les paso la mano de originales...aunque, partiendo desde la premisa de que todo es subjetivo, como tu siempre lo dices, igual habrá a quien se le acomode el asunto XD :D

Responder
Juan  

ya la puse en mi blog, y las imágenes la puse como link, gracias por compartir. :)

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