🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

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.


You May Also Like