Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image and video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation,
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.
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 -->×PreviousNext
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:
For information regarding Keyboard shortcuts, Gallery Options, API methods, Video Gallery setup, Gallery extensions and Browser support, please refer to the blueimp Gallery documentation.
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
<!-- ... -->
Released under the MIT license.