Create a filtered image gallery with jQuery and Fancybox

We are going to create a Fancybox image gallery that can be filtered by different categories using jQuery and Fancybox. If you have seen the
Isotope jQuery plugin, then you get the idea of what we will be talking about.

This the first part of a series of two tutorials.

filtered image gallery - Fig 01

 

Let's start by defining the two main sections we would need to focus on :

  • The categories selector (tab style)
  • The Fancybox image gallery (thumbnails collection)
The category selector

First, imagine our gallery organized by different categories, i.e. :

  • Animals
  • Landscapes
  • Architecture

The category selector will allow us to filter the gallery by any of the existing categories as above and browse it in Fancybox.

The basic html :

<div id="galleryTab">
  <a data-rel="all"  href="javascript:;" class="filter active">View all</a>
  <a data-rel="anim" href="javascript:;" class="filter">Animals</a>
  <a data-rel="land" href="javascript:;" class="filter">Landscapes</a>
  <a data-rel="arch" href="javascript:;" class="filter">Architecture</a>
</div>

Notice that we have set a (HTML5) data-rel attribute to each link to define the category they will be related to. Also notice that the value of each data-rel attribute corresponds to the first 4 letters of each category for convention purposes. Our initial state is "View all" (class="active").

The fancybox image gallery (thumbnails collection)

If you have ever used Fancybox, the html is pretty straight forward : wrap your image thumbnails with a link to a big version of each image.

<div class="galleryWrap">
  <a class="fancybox" data-fancybox-group="gallery" data-filter="anim" href="./animals/animal01.jpg"><img src="./thumbs/animal01.jpg" alt="" /></a>
  <a class="fancybox" data-fancybox-group="gallery" data-filter="anim" href="./animals/animal02.jpg"><img src="./thumbs/animal02.jpg" alt="" /></a>
  <a class="fancybox" data-fancybox-group="gallery" data-filter="land" href="./landscape/landscape01.jpg"><img src="./thumbs/landscape01.jpg" alt="" /></a>
  <a class="fancybox" data-fancybox-group="gallery" data-filter="land" href="./landscape/landscape02.jpg"><img src="./thumbs/landscape02.jpg" alt="" /></a>
  <a class="fancybox" data-fancybox-group="gallery" data-filter="arch" href="./architecture/architect01.jpg"><img src="./thumbs/architect01.jpg" alt="" /></a>
  <a class="fancybox" data-fancybox-group="gallery" data-filter="arch" href="./architecture/architect02.jpg"><img src="./thumbs/architect02.jpg" alt="" /></a>
  ... etc.
</div>

Notice that the initial value of the data-fancybox-group attribute has been set to "gallery". That will all allow us to browse all the images from all categories in Fancybox.

Also notice that each link has a data-filter attribute, where we can set what category this image will belong to.

HINT : you can add additional classes to your html code in order to apply custom CSS styles to the category selector tabs and the image thumbnails.
The Fancybox script

For our gallery, we will be using Fancybox v2. The script is very basic, just notice I have decided to use the Fancybox's buttons helper to navigate through the gallery though :

jQuery(function($){
    // fancybox
    $(".fancybox").fancybox({
        modal: true, // disable regular nav and close buttons
        // add buttons helper (requires buttons helper js and css files)
        helpers: {
            buttons: {}
        } 
    });
}); // ready
The category selector jQuery script

To filter the elements by category, the script will need to perform basically two things :

  • Show only those (thumbnail) elements that their data-filter attribute matches the data-rel attribute of the selected category tab.
  • Set the data-fancybox-group attribute to match the selected filter so only those elements will be shown in the Fancybox gallery.
jQuery(function ($) {
    // fancybox
    $(".fancybox").fancybox({
        modal: true, // disable regular nav and close buttons
        // add buttons helper (requires buttons helper js and css files)
        helpers: {
            buttons: {}
        } 
    });
    // filter selector
    $(".filter").on("click", function () {
        var $this = $(this);
        // if we click the active tab, do nothing
        if ( !$this.hasClass("active") ) {
            $(".filter").removeClass("active");
            $this.addClass("active"); // set the active tab
            // get the data-rel value from selected tab and set as filter
            var $filter = $this.data("rel"); 
            // if we select view all, return to initial settings and show all
            $filter == 'all' ? 
                $(".fancybox")
                .attr("data-fancybox-group", "gallery")
                .not(":visible")
                .fadeIn() 
            : // otherwise
                $(".fancybox")
                .fadeOut(0)
                .filter(function () {
                    // set data-filter value as the data-rel value of selected tab
                    return $(this).data("filter") == $filter; 
                })
                // set data-fancybox-group and show filtered elements
                .attr("data-fancybox-group", $filter)
                .fadeIn(1000); 
        } // if
    }); // on
}); // ready

And that's it. See it working.
 
DEMO

Use your CSS to style your selector tabs as well as your image thumbnails in your most creative way.

 
In Part 2, we will learn how to create our gallery from images stored in in different sub-directories and create their corresponding thumbnails automatically using php.

06. June 2013 by
Categories: code, fancybox 2, html5, jquery, plugins | 41 comments