How to Build a Sortable Portfolio with Twitter Bootstrap + Quicksand.js

Today we’ll be looking at extending Bootstrap’s built-in functionality with another popular jQuery plugin, Quicksand.js, to build a single-page gallery with categories. Additionally, we’ll show how to have each item open its own modal box. As a sort of bonus, all of this will be done without needing any extra CSS.

---

View Demo | Download Source Files

---

Here’s how the markup looks. The first bit is the navigation, which requires a data-value for filtering distinction. These values are then applied to the data-type attributes of the gallery items themselves to define which item belongs to which category. Further, we’ll need ascending data-id values for Quicksand. Bootstrap takes care of styling via the “thumbnail” component.

<ul class="filter nav nav-pills">
  <li data-value="all"><a href="#">All</a></li>
  <li data-value="dog"><a href="#">Dog</a></li>
  <li data-value="cat"><a href="#">Cat</a></li>
  <li data-value="bird"><a href="#">Birds</a></li>
</ul>

<ul class="thumbnails">
  <li data-type="dog" data-id="id-1" class="span3">
    <a href="#" class="thumbnail" id="dog1"><img src="images/dog1.jpg" alt=""></a>
  </li>
  <li data-type="cat" data-id="id-2" class="span3">
    <a href="#" class="thumbnail" id="cat1"><img src="images/cat1.jpg" alt=""></a>
  </li>
  <li data-type="bird" data-id="id-3" class="span3">
    <a href="#" class="thumbnail" id="bird1"><img src="images/bird1.jpg" alt=""></a>
  </li>
</ul>

The JavaScript initialization does a couple of things at the same time while staying relatively simple. First, we will make use of the bootbox.js plugin to significantly streamline Bootstrap’s modal markup. After calling the script, be sure to name your function “gallery” for a later purpose, then create some alerts that contain an image and caption. These will be specified to affect the IDs that match the thumbnails in your markup.

function gallery(){
        $('#dog1').click(function() { bootbox.alert('<img src="images/dog1.jpg"><h4>Dog ipsum dolor sit amet</h4>'); });
        $('#cat1').click(function() { bootbox.alert('<img src="images/cat1.jpg"><h4>Cat ipsum dolor sit amet</h4>'); });
        $('#bird1').click(function() { bootbox.alert('<img src="images/bird1.jpg"><h4>Bird ipsum dolor sit amet</h4>'); });
    }

Next, we’ll want to call quicksand.js and continue our initialization with the following short script:

var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone(); 
var $filterClass = "";
$('ul.filter li').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
    if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
    else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
    $itemsHolder.quicksand(
      $filters,
      { duration: 1000 },
      gallery
      );
});
$(document).ready(gallery);

Inherently, Quicksand will nullify Bootstrap’s modal feature as soon as you interact with any of the categories. That is, the modal works before firing Quicksand, but not after. However, we’ve easily avoided this issue by defining our Bootbox function earlier. As shown above, we then used “gallery” as an attribute inside the quicksand() function and setup $(document).ready(gallery);. Now modal will work as expected both before and after selecting a filter/category.

Check out the demo and try this out for yourself by downloading the source files.

---

View Demo | Download Source Files

---