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.
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.
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
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.