Instagram-style Photo Gallery With jQuery And Bootstrap

A jQuery & Bootstrap based photo gallery web app that allows to display large photos in a carousel view when clicking on a thumbnail image. Similar to the gallery lightbox so that you can navigate between photos with next/prev navigation arrows.

Basic usage:

1. Load the required Bootstrap's stylesheet and main.css in the head section of your html document.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

2. Create a thumbnail grid for your images following the markup structure as shown below.

<div class="carouselGallery-grid hidden-xs">
  <div class="row">
      <div class="carouselGallery-col-60">
        <div class="carouselGallery-col-1 carouselGallery-carousel" 
             data-index="0" 
             data-username="User 1" 
             data-imagetext="Image Description 1" 
             data-location="" 
             data-likes="1234" 
             data-imagepath="large.jpg" 
             data-posturl="Post url" 
             style="background-image:url(small.jpg);">
          <div class="carouselGallery-item">
              <div class="carouselGallery-item-meta">
                  <span class="carouselGallery-item-meta-user">
                      @User 1
                  </span>
                  <span class="carouselGallery-item-meta-likes">
                      <span class="icons icon-heart"></span>1234
                  </span>
              </div>
          </div>
        </div>
      <div class="carouselGallery-col-1 carouselGallery-carousel" 
             data-index="0" 
             data-username="User 2" 
             data-imagetext="Image Description 2" 
             data-location="" 
             data-likes="1234" 
             data-imagepath="large.jpg" 
             data-posturl="Post url" 
             style="background-image:url(small.jpg);">
          <div class="carouselGallery-item">
              <div class="carouselGallery-item-meta">
                  <span class="carouselGallery-item-meta-user">
                      @user2
                  </span>
                  <span class="carouselGallery-item-meta-likes">
                      <span class="icons icon-heart"></span>1234
                  </span>
              </div>
          </div>
        </div>
      </div>
      ...
  </div>
</div>

3. Load the needed jQuery library and main.js at the end of the document. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/main.js"></script>

---

This awesome jQuery plugin is developed by olssonandreas. For more Advanced Usages, please check the demo page or visit the official website.