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

DEMO

Descarga

Mas documentación

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.

DEMO

Descarga

Mas información

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.