Contenido

Galleriffic, plugin jQuery para crear galerías con los ojos cerrados

17 sep

+ 9

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.

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.

  • Creo que lo aplicaré para una galería que necesito hacer, espero pueda hacerle las adaptaciones necesarias.
    h-aber que tal me ckeda

  • seria interesante que en vez de ir a flickcosa…sea un directorio propio de imagenes….(eso seria con php para sacar las imagenes del directorio)…

  • no le entiendo mucho al jquery en realidad nada jajaj por que no subes el codigo completo y asi lo estudio y lo entiendo mejor?

  • No logro insertar la galeria de imagenes en mi web, podrian orientarme en que parte poner los codigos que se mencionan en la nota.

    Muchas gracias!

  • Me gusta bastante la galeria, aunque por mi poco conocimiento de jquery no se me hace tan fácil.

    Gracias.

  • Hola!
    tengo, una pregunta, he cargado la galería con jquery pero me está dando problemas con los .png trasnparente. ¿Sería fácil (y posible) quitar las transiciones de alfa 0 – 100 de una imagen a otras?

    Evidentemente esto delata mi nulo de conocimiento de Jquery. Os dejo el ´codigo:

    
    $(document).ready(function() {
    	// Initialize Advanced Galleriffic Gallery
    	var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', {
    		delay:                  2000,
    		numThumbs:              4,
    		preloadAhead:           10,
    		enableTopPager:         true,
    		enableBottomPager:      true,
    		imageContainerSel:      '#slideshow-adv',
    		controlsContainerSel:   '#controls-adv',
    		captionContainerSel:    '#caption-adv',
    		loadingContainerSel:    '#loading-adv',
    		renderSSControls:       true,
    		renderNavControls:      true,
    		playLinkText:           'Play Slideshow',
    		pauseLinkText:          'Pause Slideshow',
    		prevLinkText:           '‹ Previous Photo',
    		nextLinkText:           'Next Photo ›',
    		nextPageLinkText:       'Next ›',
    		prevPageLinkText:       '‹ Prev',
    		enableHistory:          true,
    		autoStart:              false,
    		onChange:               function(prevIndex, nextIndex) {
    			$('#thumbs-adv ul.thumbs').children()
    				.eq(prevIndex).end()
    				.eq(nextIndex).fadeTo('fast', 1.0);
    		},
    		onTransitionOut:        function(callback) {
    			$('#slideshow-adv, #caption-adv').fadeOut('fast', callback)
    		},
    		onTransitionIn:         function() {
    			$('#slideshow-adv, #caption-adv').fadeIn('fast');
    		},
    		onPageTransitionOut:    function(callback) {
    			$('#thumbs-adv ul.thumbs').fadeOut('fast', callback);
    		},
    		onPageTransitionIn:     function() {
    			$('#thumbs-adv ul.thumbs').fadeIn('fast');
    		}
    	});
    	
    	// Initialize Minimal Galleriffic Gallery
    	var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', {
    		imageContainerSel:      '#slideshow-min',
    		controlsContainerSel:   '#controls-min'
    	});
    });
    
  • Hola, me interesa saber si puedo asignar las variables que contienen a cada imagen que jalo desde una bd dinamicamente, mediante una previa consulta a la bd? Agradeceria un ejemplo.
    saludos.

  • @Antonio Calderon: Claro Antonio, puedes generar las imagenes y meterlas en el HTML mediante una petición PHP y posteriormente aplicarlo el código Javascript del plugin.

  • buen dia. queria consultarles lo siguiente. tengo distintas categorias de imagenes, con lo cual quiero que al clickear en una categoria se carguen las imagenes correspondientes. lo hago mediante ajax. el tema es que cuando se llama al callback, me carga las imagenes OK pero pierdo los efectos de jquery gallerific.
    es como si nunca se recargaria la parte de $(document).ready(function() {…..

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.