bootstrap-gallery
A small, light, responsive Bootstrap Gallery
Demo
Installation
- Download the latest release: v0.0.8
Usage
- include
bootstrap-gallery.jsandbootstrap-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">- 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>- 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.
