martes, 9 de noviembre de 2010

Galerías en JQuery

Esta vez voy a escribir sobre unas galerías que me encontré por ahí, estan escritas en JQuery por lo tanto son relativamente fáciles de implementar.

jqFancyTransitions:

La primera es jqFancyTransitions, con la cual ya he implementado y sus efectos son bastante buenos y muy vistosos. Esta bastante padre por que es configurable con muchos parámetros y no es tan rígida como otros plugins.

Lo único que tenemos que hacer es:
descargar e incorporar el js de jqFancyTransitions
incorporar JQuery y el js de jqFancyTransitions de la siguiente manera:
<codigo>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/jqFancyTransitions.js" type="text/javascript"></script>
</codigo>

generamos la salida HTML de la siguiente manera:
<codigo>
<div id='slideshowHolder'>
 <img src='img1.jpg' alt='img1' />
 <img src='img2.jpg' alt='img2' />
 <img src='img3.jpg' alt='img3' />
</div>
</codigo>

dentro de nuestro documento HTML hacemos esta llamada:
<codigo>
<script>
$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
</script>
</codigo>

Listo, solo nos queda probar que todo este bien.

A continuación muestro la opciones que trae este plugin para configurarse:
effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links


JQuery: jqGalScroll 2.0:

Este plugin es una galería más escrita en JQuery que nos permite mostrar imágenes de forma vistosa y atractiva, para serles sinceros esta galería es una mas, pero aun así es buena. A continuación describo la implementación de esta:

implementar la llamada a los css y js de la siguiente manera:
<codigo>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.easing.1.2.js"></script>
<script type="text/javascript" src="jqGalScroll.js"></script>
<style type="text/css" media="screen">
        @import url(jqGalScroll.css);
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("ul.jqGalScroll").jqGalScroll({height:268,width:400,ease:'easeInOutCubic',speed:1000});
    });
</script>
</codigo>

lo que sigue es generar nuestra salida HTML para el script de la galería haga lo suyo una vez cargado nuestro document:
<ul class="jqGalScroll">
           <li><img src="common/img/alamos_en_otonio.jpg" alt="Alamos en Otoño" /></li>
        <li><img src="common/img/chapelco_verano.jpg" alt="Chapelco - San Martin de los Andes - Verano" /></li>
        <li><img src="common/img/gch_chapelco12.jpg" alt="Chapelco bajo Nieve" /></li>
        <li><img src="common/img/ch_rafting01.jpg" alt="El rafting en la zona" /></li>
        <li><img src="common/img/foto.jpg" alt="Naturaleza en Neuquen - Argentina" /></li>
</ul>

Y de esa manera se configura nuestra galería, ahora como podemos ver esta tambien trae unas propiedades de configuración:

height: alto de la imagen.
width: ancho de la imagen.
speed: velocidad de transición entre cada imagen.


Espero que esto les haya ayudado un poco, al menos para los que somos desarrolladores Web y que pretendemos implementar una galería en algún sitio.

Mes despido y dejen sus comentarios, yo los leeré y daré seguimiento.