Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter's Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 css
Octocat-spinner-32 img
Octocat-spinner-32 js
Octocat-spinner-32 .gitignore
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 package.json
README.md

Bootstrap Image Gallery

Demo

Bootstrap Image Gallery Demo

Description

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter's Bootstrap toolkit, to ease navigation between a set of gallery images.
It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

Usage

Preparation

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

<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">

Add the following HTML snippet to the body of your webpage:

<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
        <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
        <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
    </div>
</div>

Include the following scripts:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://blueimp.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>

Initialization

Initialize the Image Gallery widget by adding the following data-attributes to a container element containing a set of links to image files with the attribute rel="gallery":

<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
    <a href="banana.jpg" title="Banana" rel="gallery">Banana</a>
    <a href="apple.jpg" title="Apple" rel="gallery">Apple</a>
    <a href="orange.jpg" title="Orange" rel="gallery">Orange</a>
</div>

No additional JavaScript snippets are required. Note that you can also add links to the container element at a later stage.

It is also possible to use different elements than links for the gallery functionality, by storing the url to the images as data-href attribute and setting data-selector on the gallery container:

<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" data-selector="div.gallery-item">
    <div class="gallery-item" data-href="banana.jpg" title="Banana">Banana</div>
    <div class="gallery-item" data-href="apple.jpg" title="Apple">Apple</div>
    <div class="gallery-item" data-href="orange.jpg" title="Orange">Orange</div>
</div>

API

Options

The Image Gallery follows the guideline of the Bootstrap JavaScript collection. Options can be passed along as data-attributes, either set on the gallery container or on the modal dialog. The following example sets the slideshow timer to 5 seconds:

<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"
    data-slideshow="5000">
    ...
</div>

More Options are documented at the start of the Image Gallery source file.

Fullscreen mode

Fullscreen mode is enabled by adding the CSS class "modal-fullscreen" to the modal element:

$('#modal-gallery').addClass('modal-fullscreen');

Please refer to the demo source code on how to enable real fullscreen mode on supported browsers.

Deinitialize the click event listener

To deinitialize the Modal Gallery event listener, the following code snippet can be used:

$(document.body).off('.modal-gallery.data-api')

Please also have a look at the Bootstrap JS Guidelines.

Requirements

License

Released under the MIT license.

Something went wrong with that request. Please try again.