Instagram-style Photo Gallery With jQuery And Bootstrap
File Size: | 172 KB |
---|---|
Views Total: | 27551 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.