Si aún no has hecho una galería en condiciones es por que no has querido. Con la cantidad de plugis, aplicaciones y códigos que os he ido mostrando habéis tenido posibilidad, pero si así y todo nunca os habéis aventurado o simplemente no hacía falta hacerlas, os recomienda Galleriffic.
Se trata de un plugin desarrollado sobre jQuery, que permite que crear una galería de imagenes con los ojos cerrados.
¿Como montarla?
Primero hemos de crear el contendor en el que irán las imagenes y controles:
<div id="content"> <div id="controls"></div> <div id="slideshow"></div> <div class="embox"> <div id="download"><a id="download-link" class="download">Download Original</a></div> <div id="image-title"></div> <div id="image-desc"></div> </div> </div> <div id="navigation"></div>
Una vez ya declarada la estructura de nuestra galería únicamente tendremos que indicar las imagenes que queremos mostrar, para ello usaremos Javascript.
var data = [
{
slide: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg',
thumb: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg',
original: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg',
title: 'Title #0',
description: 'Description'
},
...
];
Así, todas las imágenes que deseemos, indicando un título y una descripción que veremos en parte inferior de la galería.
$(document).ready(function() {
var gallery = $(document).galleriffic.init(data, {
delay: 2000,
numThumbs: 12,
imageContainerSel: '#slideshow',
thumbsContainerSel: '#navigation',
controlsContainerSel: '#controls',
titleContainerSel: '#image-title',
descContainerSel: '#image-desc',
downloadLinkSel: 'a#download-link'
});
});
Una vez definidas las imágenes solo nos queda indicar mediante jQuery que elementos interfieren en la galería, el número de miniaturas y el tiempo que tarda la transición de los efectos.
Personalmente no es de las que más me gusten, pero es realmente fácil.
8 comentarios, 0 referencias
+
#