SummArg | Cursos y recursos para webmasters

27/02/2012

Galería animada del tipo carousel para diseños elásticos

ElastiSlide es un plugin para jQuery que nos permite generar galerías carousel con la característica de que se adapta al tamaño de la pantalla por lo que es ideal para diseños líquidos o elásticos. Los invitamos a que ingresen al Demo (posee varios diferentes) y redimensionen la ventana del naveador. Podrán comprobar que la funcionalidad de la galería se mantiene sin importar el tamaño que le demos a la ventana. También se redimensionan las miniaturas para conservar la proporción y la cantidad de imágenes a mostrarse.

Podemos descargar los archivos necesarios en el link que indicamos debajo. Para insertar este slider a nuestro sitio web debemos respetar la siguiente estructura HTML:

<div id="carousel" class="es-carousel-wrapper">
 <div class="es-carousel">
 <ul>
 <li>
 <a href="#">
 <img src="images/medium/1.jpg" alt="image01" />
 </a>
 </li>
 <li>...</li>
 ...
 </ul>
 </div>
 </div>

Y luego podemos proceder a linkear los recursos e indicar al plugin a que ID debe aplicarse.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="js/jquery.elastislide.js"></script>
 <script type="text/javascript">
  
 $('#carousel').elastislide({
 imageW : 180,
 minItems : 5
 });
 </script>

Finalmente les comentamos que el único defecto que encontramos en su uso, es en el caso de querer aplicar un anchor a cada una de las imágenes (para linkearla a una mas grande o a alguna página en particular) deberemos modificar el archivo jquery.elastislide.js, borrando la línea 268.

// item click event
 this.$items.bind(‘click.elastislide’, function( event ) {
 instance.options.onClick( $(this) );
 return false; /* BORRAR ESTA LINEA */
 });

Elastislide Descarga | Demo

Dejar un comentario

  1. Muy buen plugin. El otro defecto es que al dar clic sobre las imágenes no lo llevan a la página de destino. Para solucionarlo puede comentar o borrar la línea 92 del archivo jquery.elastiSlide.js:

    92. onClick : function() { return false; }

    Así las imágenes se enlazan con las páginas de destino. Espero que les sirva.

Dejar un comentario