Galleria: Plugin jQuery para galerías de imágenes con Responsive Design

0
218

Galleria es un plugin de jQuery para simplificar la creación de galerías de imágenes para sitios webs y dispositivos móviles.

Este framework es compatible con dispositivos touch como iPad y Android. El plugin es gratuito para su versión clasica, pero cuenta con varios temas mejorados que tienen un costo.

Implementación de Galleria

Primero descargaremos el Zip que contiene el plugin de Galleria y el tema clásico.
Descargar: Galleria-1.2.7.zip

Incluir los headers

[html]
<!– load jQuery –>
<script src="jquery.js"></script>
<!– load Galleria –>
<script src="galleria-1.2.7.min.js"></script>
[/html]
Incluiremos el Framework jQuery y Galleria 1.2.7
[css]
#galleria{height:320px}
[/css]
el id #galleria define el alto de nuestro contenedor de la galería de imágenes

Estructura del HTML

El siguiente bloque de código debe contener un div con id=”galleria” para definir la lista

de galerías dentro de ella.
[html]
<div id="galleria">
<a href="imagen.jpg">
<img data-title="Titulo"
data-description="Descripción"
src="imagen.jpg"/>
</a>
<a href="imagen2.jpg">
<img data-title="Titulo 2"
data-description="Descripción 2"
src="imagen2.jpg"/>
</a>
</div>[/html]

Iniciar la galería en el Footer

El siguiente código

deberá ir justo antes de cerrar el tag para inicializar la galería, en la primera línea asignamos la ruta del tema que utilizaremos, en la segunda ejecutamos la creación de la galería.
[javascript]
Galleria.loadTheme(&#039;galleria.classic.min.js&#039;);
Galleria.run(&#039;#galleria&#039;);
[/javascript]
Web Oficial: Galleria.io
Descargar: Galleria-1.2.7.zip

Ver Demo: Galleria Theme Preview

zp8497586rq