jueves, 16 de junio de 2011

Galeria de imagenes JS, jQuery

Galería de imágenes usada compatible con WordPress.
Por ejemplo, cuando se muestran las entradas completas, mostrar todas las imágenes de golpe, puede hacer muy largo el post, o mandar la información demasiado debajo.
Añadiendo la llamada en wp-content/themes/miPlantilla/single.php
Yo para solucionar eso, he usado el frameWork GALLERIA.
A descargar desde aquí.
Sigue las instrucciones para instalar en tu web (básicamente es descomprimir la carpeta en tu raíz de ficheros de tu página, si no te aclaras con el inglés o con el manejo de ficheros/rutas).
En mis archivo misScript.js he añadido esto:

jQuery('#gallery').galleria({
width: 450,height: 350,
imageCrop: true,
transition: 'fade',
extend: function(options)
{
Galleria.log(this);
Galleria.log(options);
this.bind('image',function(e)
{
Galleria(e);
Galleria.log(e.imageTarget);
jQuery(e.imageTarget).click(this.proxy(function()
{
this.openLightbox();
}));
});
}
});

Lo puedes copiar y pegar.
Crea un div con el id='gallery', y las imágenes de dentro ya las redimensiona y hace casi todo el plugin por si solo.
Para adecuar mejor la galería a tu web, donde pone width y height, son los pixeles en ancho y alto que va a oocupar la galería, los puedes modificar tanquilamente.

Es muy recomendable que las imágenes no difieran mucho en tamaño original al que luego vayan a tener en la galería (ganar velocidad) y NO deben ser más pequeñas, si no se quiere perder calidad (se nota mucho).

Hay un template (plantilla) por defecto para descargar gratuita, y otras 3 de pago más completas.
En la web, si te apetece, también explican cómo crear tus propias plantillas y un par de opciones de configuración básicas de la descargada.

1 comentario:

  1. Hola como estas.. sabes he intentado de todas laas maneras insertar tu codigo Jquery pero no me funciona... porfa si puedes explicar más detalladamente en que parte insertar el codigo y si falta direccionar algo más como el flicker o los themes classic q incluyen en el pakete!!!

    Agradezco tu ayuda!!


    Saludos!!

    ResponderEliminar