Crear una galería de fotos con Bootstrap

En este tutorial les voy a presentar un plugin increíble y fácil de usar (bootstrap-photo-gallery by michaelsoriano) para que tu puedas crear tus propias galerías de fotos basándote  en el plugins jQuery  y el Framework Bootstrap para la presentación de tus  imágenes.

Crear una galería de fotos con Bootstrap

Con este increíble plugin puedes crear una galería de tus imágenes favoritas y agregarlo a tu sitio web,  también puedes  utilízarlo para mostrar galería de imágenes de tu portafolio de trabajo.

Este plugin de jQuery creará una galería de fotos basada en Bootstrap para tus imágenes. Admite alturas variables para las imágenes y los subtítulos. También se incluye una ventana “modal” opcional con paginación “siguiente” y “anterior”. El complemento requiere de Bootstrap (3.3.5 y superior) jQuery (1.10 y superior).

Crea una galería de fotos basada en Bootstrap y jQuery para tus imágenes


Bibliotecas:  Primero incluye las bibliotecas dependientes en la página y luego agrega:

  • jquery.bsPhotoGallery.css
  • jquery.bsPhotoGallery.js
HTML:  Necesitas crear una lista desordenada de tus imágenes. El código html de muestra creado con algunas imágenes de demostración que puede reemplazar las siguientes imágenes con tus propias imágenes.
jQuery: A continuación, inicializa el complemento y pasa las clases de Boostrap para diferentes tamaños como parámetro. El “hasModal” es verdadero por defecto, pero se puede desactivar configurándolo en “falso”.
Si necesitas mostrar una imagen diferente en el cuadro modal, debes agregar un atributo adicional a la imagen “data-bsp-large-src” con el valor como la ruta a la imagen.
Si necesita modificar los estilos modales sin jugar con el CSS predeterminado de Bootstrap, el plugin asigna una identificación única al modal. La ID se llama: #bsPhotoGalleryModal. Una ID se usa como una clase supuesta porque solo se puede mostrar 1 modal a la vez.

Este increíble plugins a sido desarollado por:  michaelsoriano, si quieres echar un vistazo a la documentación oficial del complemento, puedes hacerlo aquí

En un tutorial posterior estaré subiendo un script PHP, para poder manipular la carga de imágenes al servidor desde un formulario web, también  poder almacenar la informacion de cada galería en una base de datos MySQL.

Ver demostración Descargar archivos