- Overview
- Documents
Flickr Photoset is a jQuery plugin for generating photoset gallery using Bootstrap and Bootstrap Image Gallery.
Dependencies
Source: github.com
Jul 14, 2014 in Social & RSS 4437 views
Flickr Photoset is a jQuery plugin for generating photoset gallery using Bootstrap and Bootstrap Image Gallery.
Dependencies
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="vendor/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="vendor/Gallery-2.15.0/css/blueimp-gallery.min.css"> <link rel="stylesheet" href="vendor/Bootstrap-Image-Gallery-3.1.0/css/bootstrap-image-gallery.min.css"> <script src="vendor/jquery-1.11.1.min.js"></script> <script src="vendor/bootstrap-3.1.1/js/bootstrap.min.js"></script> <script src="vendor/imagesloaded.pkgd.min.js"></script> <script src="vendor/Gallery-2.15.0/js/jquery.blueimp-gallery.min.js"></script> <script src="vendor/Bootstrap-Image-Gallery-3.1.0/js/bootstrap-image-gallery.min.js"></script> <script src="js/flickr-jquery.js"></script>
2. HTML
<!-- Gallery thumbnails --> <div class="gallery"> <div class="row"> <div class="col-xs-12 spinner-wrapper"> <div class="spinner"></div> </div> <div class="gallery-container"></div> </div> </div> <!-- Blueimp gallery --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">?</a> <a class="next">?</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-hidden="true">×</button> <h4 class="modal-title"></h4> </div> <div class="modal-body next"></div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left prev"> <i class="glyphicon glyphicon-chevron-left"></i> Previous </button> <button type="button" class="btn btn-primary next"> Next <i class="glyphicon glyphicon-chevron-right"></i> </button> </div> </div> </div> </div> </div>
3. JAVASCRIPT
$(function() { // Set blueimp gallery options. $.extend(blueimp.Gallery.prototype.options, { useBootstrapModal: false, hidePageScrollbars: false }); // Engage gallery. $('.gallery').flickr({ apiKey: '59ac8916e80833e67ab731f8c95dfdde', photosetId: '72157630137235910' }); });
Tagged with:
jquery flickr photoset
flickr
photoset gallery
image gallery
bootstrap image gallery
bootstrap
generating photoset gallery
flickr photoset
Related Articles