A small, light, responsive Bootstrap Gallery
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css bugfix caption may now appear in multiple lines Jul 14, 2016
js
less
.gitignore
CHANGELOG.md
LICENSE
README.md

README.md

bootstrap-gallery

A small, light, responsive Bootstrap Gallery

Demo

Installation

  • Download the latest release: v0.0.8

Usage

  1. include bootstrap-gallery.js and bootstrap-gallery.css

js:

<script type="text/javascript" src="js/bootstrap-gallery.js"></script>

css:

<link rel="stylesheet" type="text/css" href="css/bootstrap-gallery.min.css">

or less:

<link rel="stylesheet/less" type="text/css" href="less/bootstrap-gallery.less">
  1. code your gallery with markup like this
<div class="gallery row">
  <a class="col-xs-6 col-sm-4" href="/path/to/img1.jpg">
    <img src="/path/to/thumb1.jpg" alt="thumb1">
  </a>
  <a class="col-xs-6 col-sm-4" href="/path/to/img2.jpg">
    <img src="/path/to/thumb2.jpg" alt="thumb1">
  </a>
</div>
  1. activate the plugin on the gallery container
$('.gallery').bootstrapGallery();

Settings

default values

the default values represent the setup for Bootstrap 3 with Glyphicons

BootstrapGallery.defaults = {
modalAttrs: {
  "id": "gallery-modal",
	"class": "modal fade",
	"tabindex": "-1",
	"role": "dialog",
	"aria-hidden":"true"
},
containerAttrs: {
  "class": "img-container"
},
wrapperAttrs: {
  "class": "img-wrapper"
},
imgAttrs: {
  "class": "img-responsive",
  "src": "#"
},
closeBtnAttrs: {
  "class": "btn-close glyphicon glyphicon-remove",
  "aria-hidden": "true"
},
btnPrevAttrs: {
  "class": "btn-prev glyphicon glyphicon-chevron-left"
},
btnNextAttrs: {
  "class": "btn-next glyphicon glyphicon-chevron-right"
},
indicatorAttrs: {
  "class": "indicator glyphicon glyphicon-refresh"
},
indicatorThreshold: 100,
swipeThreshold: 30,
caption: false
};

FontAwesome

to use the FontAwesome Icons just activate your gallery as below:

$('.gallery-overview').bootstrapGallery({
iconset: "fontawesome"
});

Copyright and license

Copyright 2014 Jonas Braun under MIT license.