Cacher is the code snippet organizer for pro developers

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

<!-- http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox/ -->
<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>

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

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