Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

A small, light, responsive Bootstrap Gallery

Resources

License

Packages

No packages published
You can’t perform that action at this time.