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:
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> <!-- The container for the modal slides --> <!-- Controls for the borderless lightbox --> ‹ › × <!-- The modal dialog, which will be used to wrap the lightbox content --> × Previous Next
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:
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
:
<!-- ... -->
Requirements
- jQuery v. 1.11.3+
- Bootstrap v. 3.3.6+
- blueimp Gallery v. 2.16.0+
License
Released under the MIT license.