Bootstrap Image Gallery - A jQuery Gallery Slider

If you want a simple and straightforward way of presenting your online portfolio then try Bootstrap Image Gallery.

Created by Sebastian Tschan (a.k.a. blueimp), this extension of Twitter’s Bootstrap toolkit for its Modal dialog provides very easy navigation between sets of gallery images, plus all of the essential attributes and functions that other image slider galleries offer like transition effects, keyboard navigations, slideshow functionality, and a full-screen mode.

Click on the image to view the demo, then download the source files.

To use, paste this HTML snippet between the <head></head> tags of your webpage:

<link rel="stylesheet"   href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

<link rel="stylesheet"   href="bootstrap-image-gallery.min.css">

<!--[if lt IE 7]>

<style type="text/css">

/* The following is required for Modals to work on IE6 */

.modal {

position: absolute;

top: 50%;

filter: none;

#gallery-modal.fullscreen {

overflow: hidden;

</style>

<![endif]-->

In addition, include the following scripts to call all the necessary javascript files:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script   src="vendor/jquery.ui.widget.min.js"></script>

<script   src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.min.js"></script>

<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>

<script   src="bootstrap-image-gallery.min.js"></script>

Then paste this inside the <body></body> section:

<!-- gallery-loader is the loading animation container -->

<div id="gallery-loader"></div>

<!-- gallery-modal is the modal dialog used for the image gallery   -->

<div id="gallery-modal">

<div  >

<a   href="#">×</a>

<h3  ></h3>

</div>

<div></div>

<div  >

<a>Next</a>

<a>Previous</a>

<a target="_blank">Download</a>

</div>

</div>

Lastly, prepare your list of gallery images by calling the imagegallery() method on a jQuery container element containing a set of links to image files with the attribute rel=”gallery” like so:

<div id="gallery">

<a   href="banana.jpg" title="Banana"   rel="gallery">Banana</a>

<a   href="apple.jpg" title="Apple"   rel="gallery">Apple</a>

<a   href="orange.jpg" title="Orange"   rel="gallery">Orange</a>

</div>

May this tutorial and plugin benefit you in designing your online portfolio. over at blueimp’s github by clicking here (available in ZIP and TAR.GZ formats).

Incoming search terms for the article:

Comments
Trackbacks

1 Comment

Dave

05.30.2012

I use bootstrap themes for almost all of my WP sites. I have been playing with how to call a gallery ID into the bootstrap gallery framework. I can get static pictures to work but I am having issues with WP integration. Have you had any luck with this?

There are no trackbacks to display at this time.