Flux Slider, un Slider 3D personalizable para Blogger

  Escrito por Lautarorx            El 13 de octubre de 2012


Nuestro amigo Joseph desarrolló un slider con varias transiciones muy interesantes que son fácilmente configurables si uno se pone a toquetear. Se trata de uno con transiciones 3D muy interesantes que sinceramente me sorprendieron mucho, hay algunas transiciones realmente sorprendentes.

Vale decir que se necesita tener jQuery para que funcione, pero no se preocupen porque vamos a ir paso a paso. A continuación les mostraré algunos ejemplos:

Original


jQuery

Colocar este script después de <head> en caso de que no lo tengan, para averiguarlo presionen Ctrl + F en la Edición de HTML y busquen "jQuery". En caso de tenerlo procuren tener la última versión, en este caso la 1.8.2.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Javascript

En este caso vamos a tener que usar dos scripts, uno el Flux.js y otro que servirá de personalización. Peguenlos juntos justo antes de </head>.
<script type="text/javascript" src="URL_SCRIPT"/>
En la URL del script deben bajarse este archivo (abriéndolo con el bloc de notas) y subirlo a algun servidor para scripts como Google Sites.
<script charset='utf-8' type='text/javascript'>
$(function(){
window.f = new flux.slider(&#39;#slider&#39;, {
autoplay: true,
controls: true,
captions: true,
delay:10000,
pagination: false

});
$(&#39;#trans3d&#39;).bind(&#39;click&#39;, function(event){
    event.preventDefault();
    if(!flux.browser.supports3d){alert(&quot;Este navegador no soporta transiciones.&quot;);return;}
    window.f.next(&#39;turn&#39;);
});
});
</script>
  • autoplay controla que el slider se reproduzca automáticamente o no (para desactivarlo cambien true por false)
  • controls muestra las flechas para ir pasando a través de las imágenes (para desactivarlo cambien true por false)
  • captions muestra los títulos de las imágenes según el atributo title (para desactivarlo cambien true por false)
  • delay es el tiempo de transición en milisegundos (ej: para 10 segundos = 10000)
  • pagination permite mostrar un menú debajo del slider con números para ir directo a cada imágen (para activarlo cambien false por true)
HTML

Donde deseen hacer aparecer el slider ubicarán este código, puede ser en un widget o en la plantilla misma. Pueden agregarse infinitas imágenes repitiendo el código en rojo con la URL de la imágen y el título que corresponda a sus deseos.
<div class='container'>
  <div id='slidercontainer'>
    <div id='slider'>
       <img src='http://lh5.ggpht.com/_qfa9R8IbFoA/TMSonoI-BFI/AAAAAAAAA_Y/JIUvkZLA7Jw/s500/09_0114.jpg' title='Título 1'/>
        <img src='http://www.joelambert.co.uk/flux/img/avatar.jpg' title='Título 2'/>
<img src='http://www.joelambert.co.uk/flux/img/ironman.jpg' title='Título 3'/>
<img src='https://lh5.googleusercontent.com/-mzeytOBE9N8/T_Zo6usgMvI/AAAAAAAACGM/dCxAdVFkwP8/s600/15_0437.jpg' title='Título 4'/>
    </div>
  </div>
</div> 
También podemos personalizarlo y elegir el efecto que más nos guste, por ejemplo el Tiles 3D...

Ejemplo: Tiles 3D


Para hacerlo solo reemplazamos el el primer script (Flux.js) que es el más largo por este:
<script type="text/javascript" src="URL_SCRIPT"/>
Se tienen que bajar este archivo y subirlo a algún hosting para reemplzar la URL.

Pueden poner el efecto que ustedes deseen, solo busquen en este script (Ctrl + F) todas las veces que aparezca tiles3d y reemplazenlo por alguno de estos efectos. Para hacerlo copien todo el código, peguenlo en el bloc de notas, cambien las partes y luego guardenlo con el nombre flux.js; después lo suben aquí y copian la URL del archivo reemplazando la que está en el atributo src:
  • 2D
    • bars
    • blinds
    • blocks
    • blocks2
    • concentric
    • dissolve 
    • slide
    • warp
    • zip
  • 3D
    • bars3d
    • blinds3d
    • cube
    • tiles3d
    • turn
Para ver como son cada uno de los efectos pueden visitar su página, también pueden seguirlo en Twitter.

PD: Cualquier inconveniente o ayuda que necesiten dejenla en los comentarios y los ayudaré...

El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.

Related Posts Plugin for WordPress, Blogger...


New Games + Hacks | Diseñado por Lautaro Rodríguez Xavier

© Informatics 2011-2012 | Se recomienda el uso de Mozilla Firefox