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
|
1 2 3 4 5 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="jquery.bsPhotoGallery.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="jquery.bsPhotoGallery.js"></script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<ul class="row first"> <li> <img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-174908-rocking-the-night-away-xs.jpg"> <div class="text">Consectetur adipiscing elit</div> </li> <li> <img alt="Yellow sign" src="http://demo.michaelsoriano.com/images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg"> <div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Colors" src="http://demo.michaelsoriano.com/images/photodune-460760-colors-xs.jpg"> <div class="text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div> </li> <li> <img alt="Retro party" src="http://demo.michaelsoriano.com/images/photodune-461673-retro-party-xs.jpg"> <div class="text">Lorem, do eiusmod tempor incid Ut enim ad minim veniam</div> </li> <li> <img alt="Technology soup" src="http://demo.michaelsoriano.com/images/photodune-514834-touchscreen-technology-xs.jpg"> <div class="text">Do eiusmod tempor</div> </li> <li> <img alt="Legal docs" src="http://demo.michaelsoriano.com/images/photodune-916206-legal-xs.jpg" data-bsp-large-src="http://demo.michaelsoriano.com/images/photodune-916206-legal-large.jpg"> <div class="text">Eiusmod tempor enim ad minim veniam</div> </li> <li> <img alt="Nature shot" src="http://demo.michaelsoriano.com/images/photodune-1062948-nature-xs.jpg"> <div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Kid with camera" src="http://demo.michaelsoriano.com/images/photodune-1471528-insant-camera-kid-xs.jpg" data-bsp-large-src="http://demo.michaelsoriano.com/images/photodune-1471528-insant-camera-kid-large.jpg"> <div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Relax and Chill" src="http://demo.michaelsoriano.com/images/photodune-2255072-relaxed-man-xs.jpg"> <div class="text">Eiusmod tempor enim ad minim veniam</div> </li> <li> <img alt="Cool colors" src="http://demo.michaelsoriano.com/images/photodune-2360379-colors-xs.jpg"> <div class="text">Consectetur adipiscing elit</div> </li> <li> <img alt="Jump over" src="http://demo.michaelsoriano.com/images/photodune-2360571-jump-xs.jpg"> <div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Culture business" src="http://demo.michaelsoriano.com/images/photodune-2361384-culture-for-business-xs.jpg"> <div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Spaghetti bitch" src="http://demo.michaelsoriano.com/images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg"> <div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Budget this" src="http://demo.michaelsoriano.com/images/photodune-2943363-budget-xs.jpg"> <div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Street art" src="http://demo.michaelsoriano.com/images/photodune-3444921-street-art-xs.jpg"> <div class="text">Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Insurance and stuff" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"> <div class="text">Ut enim ad minim veniam</div> </li> <li> <img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg"> <div class="text">Eiusmod tempor enim ad minim veniam</div> </li> <li> <img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg"> <div class="text">Ut enim ad minim veniam</div> </li> <li> <img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg"> <div class="text">Do eiusmod tempor</div> </li> <li> <img alt="Health" src="http://demo.michaelsoriano.com/images/photodune-5771958-health-xs.jpg"> <div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Constant consecutuir" src="http://demo.michaelsoriano.com/images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg"><!--no alt tag--> <div class="text">Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Search code" src="http://demo.michaelsoriano.com/images/photodune-352207-search-of-code-s.jpg"> <div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Pountac" src="http://demo.michaelsoriano.com/images/photodune-247190-secret-email-xs.jpg"><!--no alt tag, no text--> <div class="text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div> </li> <li> <img alt="Budget again" src="http://demo.michaelsoriano.com/images/photodune-2943363-budget-xs.jpg"> <div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Some alt tag" src="http://demo.michaelsoriano.com/images/photodune-3444921-street-art-xs.jpg"><!--no alt--> <div class="text">Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</div> </li> <li> <img alt="Insurance boy" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"> <div class="text">Ut enim ad minim veniam</div> </li> <li> <img alt="Food service" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg"> <div class="text">Eiusmod tempor enim ad minim veniam</div> </li> <li> <img alt="Dopamine high" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg"> <div class="text">Ut enim ad minim veniam</div> </li> </ul> |
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”.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('ul.first').bsPhotoGallery({ "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12", "hasModal" : true, // "fullHeight" : false }); }); </script> |
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.
