Slider tipo Libro con HTML5 y jQuery usando Turn.js

Había estado buscando un buen plugin para hacer el clásico efecto de un libro sin usar flash y me encontré con varios, pero el que más me gusto fue Turn.js, que aunque después me fui dando cuenta de algunas limitantes siguió siendo la opción que más me agrado.

Y las limitantes pasaban más por desear algunas caracteristicas que al parecer vendrán en una versión de paga así que tuve que quedarme con el script como esta y hacer algunas adecuaciones a pelo, como por ejemplo, el que no tenga un paginador, mismo que más adelante comentare como lo solucione.

Y por otro lado están las ventajas, que son por ejemplo:

• Usa HTML5
• Funciona en dispositivos Touch como iPad & iPhone
• Permite la carga dinamica de imagenes con Ajax
• Incluye una muy completa API
• Tiene efectos muy elegantes de transición y
• Puede llegar a funcionar con el lastre IE 8

Entremos entonces en materia, lo que necesitaremos será obviamente jQuery, Turn.js nos pide la version 1.3 o superior.

Para obtener el Turn.js te recomiendes que lo descargues de https://github.com/blasten/turn.js

Así, agregamos los scripts en el header de nuestra pagina:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/turnjs.js" type="text/javascript"></script>​

Después agregaremos las imágenes algo así:

        <div id="contenido_libro">
            <div id="wrapper_libro">
                <div class="hard"><img src="/libro/portada.jpg" width="480" height="400"></div>
                <div class="hard"><img src="/libro/pagina1.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina2.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina3.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina4.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina5.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina6.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina7.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina8.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina9.jpg" width="480" height="400"></div>
                <div><img src="/libro/pagina10.jpg" width="480" height="400"></div>
            </div>
          
            <div id="paginador">
            </div>
          
        </div>

Después nos queda solamente agregar el llamado al script:

<script>
 $('#wrapper_libro').turn({
  gradients: true,
  autoCenter: true,
  width: 960,
  height: 400,
  page:1,
  acceleration: true
 });
</script>

Hasta aquí solo he mostrado cosas que puedes aprender desde el sitio del script, ahora te mostraré como hacer un paginador para este script, obviamente es muy mejorable, ya le tocará a cada quien agregarle o mejorarle de acuerdo a su necesidad especifica, para eso agrega al script lo siguiente:

<script>
//creamos dentro del div paginador otro div y las listas
 $('#paginador').append('<div id="paginador_libro"><ul></ul></div>');
 var nav = $('#paginador_libro');
//obtenemos el numero de paginas totales del libro
 var paginas = parseInt($("#wrapper_libro").turn("pages"));
//saco el ancho para el div paginador, lo que hago es
//multiplico el ancho del LI por el numero de paginas y le agrego el ancho de los LI
//de previo y siguiente, esto para centrar el paginador ;-)
 var ancho = (paginas*28) + 50;
 $("#paginador").css('width', ancho + "px");
//agrego el LI para pagina previa
 $("#paginador_libro").append('<li class="prev_page"><a href="#">&lt;-</a></li>');
 //un FOR para agregar cada LI por cada una de las paginas
 for (var i=1;i<paginas+1;i++){
  $("#paginador_libro").append('<li class="li_pagina" id="pagina_'+i+'"><a href="#" rel="'+i+'">'+i+'</a></li>');
 }  
//agrego el LI para pagina siguiente
 $("#paginador_libro").append('<li class="next_page"><a href="#">-&gt;</a></li>');
//Este hace la accion de ir a la pagina al hacer click en el link en cada LI
 $(".li_pagina a").click(function(){
  var rel = $(this).attr("rel");
  $("#wrapper_libro").turn("page", rel);
 });
//agrega la funcion para la accion del link pagina previa
 $(".prev_page a").click(function(){
  $("#wrapper_libro").turn("previous");
 });
//agrega la funcion para la accion del link pagina siguiente
 $(".next_page a").click(function(){
  $("#wrapper_libro").turn("next");
 });
 //aqui hago varias cosas, esta funcion es llamada al moverse por entre las paginas
 $("#wrapper_libro").bind("turned", function(event, page, view) {
//primero limpio la clase activa y luego la agrego al LI de la pagina actual
  $(".li_pagina").removeClass('active');
  $("#pagina_" + page).addClass('active');
  //esto es para arreglar, cuando se hace click en un LI que muestre como activa las 2 paginas visibles
  if (page%2==0 && page>1){
   var sig = parseInt(page)+1
   $("#pagina_" + sig).addClass('active');
  }else{
   var sig = parseInt(page)-1
   $("#pagina_" + sig).addClass('active');
  };
   }); 
//agrego la clase active al primer LI al iniciar  if ( $("#wrapper_libro").turn("page")==1 ){
  $("#pagina_1").addClass('active');
 }; </script>

Esto hace que funcione el paginador, ahora les pondré el CSS para hacerlo un poco más agradable a la vista, ya cada quien le pondrá su toque al diseño:

 #paginador {
  width:auto;
  margin: .7em auto;
  text-align: center;
 }
 
 #paginador_libro li {
  list-style:none;
  padding:0; margin:0;
  float:left;
  width:23px;
  height:14px;
  background:#b0b0b0;
  text-align:center;
  font-size:11px;
  line-height:14px;
  vertical-align:middle;
  /*text-indent:9000px;*/
  margin-right:5px;
  overflow: hidden;
 }

 #paginador_libro li:hover, #paginador_libro li.active {
  background:#919191;
 }
 
 #paginador_libro li.prev_page {
  background:url(images/paginador_prev.png) no-repeat left;
  width:20px; height:14px;
  text-indent:9000px;
 }

 #paginador_libro li.prev_page:hover {
  background:url(images/paginador_prev2.png) no-repeat left !important;
 }

 #paginador_libro li.next_page {
  background:url(images/paginador_next.png) no-repeat right;
  width:20px; height:14px;
  text-indent:9000px;
 }

 #paginador_libro li.next_page:hover {
  background:url(images/paginador_next2.png) no-repeat right !important;
 }

 #paginador_libro li a{display:block; color:#666}
 
 #paginador_libro li {float:left}