Create Bootstrap jQuery based Photo Gallery for your images

Here I am going to introduce awesome and easy to use plugin (bootstrap-photo-gallery by michaelsoriano) to Create Bootstrap jQuery based Photo Gallery for your images, Using this awesome plugin you can create showcase of your favorite images and add on your website also use same for displaying portfolio images gallery.
A jQuery plugin that will create a Bootstrap based Photo Gallery for your images. It supports variable height for the images and captions. An optional “modal” box with “next” and “previous” paging is also included. Plugin requires Bootstrap (3.3.5 and above) jQuery (1.10 and above).
alt tag



Create Bootstrap jQuery based Photo Gallery for your images

Libraries:- First of all include dependent libraries on page after that add jquery.bsPhotoGallery.css and jquery.bsPhotoGallery.js on page.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="jquery.bsPhotoGallery.css" rel="stylesheet">
    <script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="jquery.bsPhotoGallery.js"></script>

HTML:- You need to create an unordered list of your images.Created sample html with some demo images you can replace following images with your own images.

 <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="Color <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>s"  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>
</ul>




jQuery: Then initialize the plugin and pass in the Boostrap classes for different sizes as a parameter. The “hasModal” is true by default – but can be turned off by setting it to “false”.

<script>
 $(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>

If you need to show a different image in the modal box, you need to add an extra attribute to the image “data-bsp-large-src” with the value as the path to the image.
If you need to modify the modal styles without messing with the default Bootstrap – a unique ID is assigned to the modal by the plugin. The ID is called: #bsPhotoGalleryModal. An ID is used as supposed to a class because only 1 modal can show at a time.

See live demo and download source code.

DEMO | DOWNLOAD

See official git repository for more details.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.