Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (181 sloc) 7.13 KB
* Bootstrap Image Gallery 2.4
* Copyright 2011, Sebastian Tschan
* Licensed under the MIT license:
<html lang="en">
<meta charset="utf-8">
<title>Bootstrap Image Gallery</title>
<meta name="description" content="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.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="">
body {
padding-top: 60px;
background: #222;
color: #fff;
header {
margin-bottom: 30px;
header h1 {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
color: #fff;
margin-bottom: 10px;
header a {
color: orange;
.modal {
color: #333;
<link rel="stylesheet" href="">
<!--[if lt IE 7]><link rel="stylesheet" href=""><![endif]-->
<!--[if lt IE 9]><script src=""></script><![endif]-->
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="brand" href="">Bootstrap Image Gallery</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Demo</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Source Code</a></li>
<li><a href="">Documentation</a></li>
<li><a href="">Issues</a></li>
<li><a href="">&copy; Sebastian Tschan</a></li>
<div class="container-fluid">
<h1>Bootstrap Image Gallery Demo</h1>
<p>Bootstrap Image Gallery is an extension to the <a href="">Modal</a> dialog of Twitter's <a href="">Bootstrap</a> toolkit, to ease navigation between a set of gallery images.<br>
It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.</p>
<button id="start-slideshow" class="btn btn-large btn-success" data-slideshow="5000" data-target="#modal-gallery" data-selector="#gallery a[rel=gallery]">Start Slideshow</button>
<button id="toggle-fullscreen" class="btn btn-large btn-primary" data-toggle="button">Toggle Fullscreen</button>
<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"></div>
<!-- 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 class="modal-body"><div class="modal-image"></div></div>
<div class="modal-footer">
<a class="btn modal-download" target="_blank">
<i class="icon-download"></i>
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
<i class="icon-play icon-white"></i>
<a class="btn btn-info modal-prev">
<i class="icon-arrow-left icon-white"></i>
<a class="btn btn-primary modal-next">
<i class="icon-arrow-right icon-white"></i>
<script src="//"></script>
<script src=""></script>
<script src=""></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
/*jslint unparam: true */
/*global window, document, $ */
$(function () {
'use strict';
// Start slideshow button:
$('#start-slideshow').button().click(function () {
var options = $(this).data(),
modal = $(,
data ='modal');
if (data) {
$.extend(data.options, options);
} else {
options = $.extend(, options);
// Toggle fullscreen button:
$('#toggle-fullscreen').button().click(function () {
var button = $(this),
root = document.documentElement;
if (!button.hasClass('active')) {
if (root.webkitRequestFullScreen) {
} else if (root.mozRequestFullScreen) {
} else {
(document.webkitCancelFullScreen ||
document.mozCancelFullScreen ||
// Load images via flickr for demonstration purposes:
url: '',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: '7617adae70159d09ba78cfec73c13be3'
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (data) {
var gallery = $('#gallery'),
$.each(, function (index, photo) {
url = 'http://farm' + + '' +
photo.server + '/' + + '_' + photo.secret;
$('<a rel="gallery"/>')
.append($('<img>').prop('src', url + '_s.jpg'))
.prop('href', url + '_b.jpg')
.prop('title', photo.title)