Bootstrap Image Gallery

• Demo
• Description
• Setup
• Documentation
• Extras
• Requirements
• License

Demo

Bootstrap Image Gallery Demo

Description

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image & video gallery.
It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can be extended to display additional content types.

Setup

Copy the css, img and js directories to your website.

Add the following HTML snippet to the head section of your webpage:

Add the following HTML snippet with the Gallery widget to the body of your webpage:

<div class="blueimp-gallery" id="blueimp-gallery">
    
    <div class="slides"></div>
    
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" class="close" type="button">×</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button class="btn btn-default pull-left prev" type="button">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button class="btn btn-primary next" type="button">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Include the following scripts at the bottom of the body of your webpage:

Create a list of links to image files with the attribute data-gallery (optionally with enclosed thumbnails) and add them to the body of your webpage:

<div>
    <a data-gallery="" title="Banana" href="images/banana.jpg">
        <img alt="Banana" src="images/thumbnails/banana.jpg">
    </a>
    <a data-gallery="" title="Apple" href="images/apple.jpg">
        <img alt="Apple" src="images/thumbnails/apple.jpg">
    </a>
    <a data-gallery="" title="Orange" href="images/orange.jpg">
        <img alt="Orange" src="images/thumbnails/orange.jpg">
    </a>
</div>

Documentation

For information regarding Keyboard shortcuts, Gallery Options, API methods, Video Gallery setup, Gallery extensions and Browser support, please refer to the blueimp Gallery documentation.

Extras

Bootstrap Image Gallery provides the additional useBootstrapModal option, which enables the original borderless layout as seen in the demo. The easiest way to enable this option is to adjust the lightbox container and set the data-use-bootstrap-modal attribute to false:

<div data-use-bootstrap-modal="false" class="blueimp-gallery" id="blueimp-gallery">

</div>

Requirements

• jQuery v. 1.11.3+
• Bootstrap v. 3.3.6+
• blueimp Gallery v. 2.16.0+

License

Released under the MIT license.