Responsive Bootstrap Gallery

Bootstrap-gallery is a small, light, responsive Bootstrap Gallery

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: iekadou.com

1. INCLUDE JS AND CSS FILES

<script type="text/javascript" src="js/bootstrap-gallery.js"></script>
<link rel="stylesheet/less" type="text/css" href="less/bootstrap-gallery.less">

2. HTML

<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>

3. JAVASCRIPT

$('.gallery').bootstrapGallery();

4. OPTIONS

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"
    },
    swipeThreshold: 30
};