• Сначала создадим неупорядоченный список, который содержит категории. Убедитесь, что для каждой категории добавлен класс со своим уникальным именем:

Теперь уже создаем другой список, состоящий из работ, фотографии или чего то ещё. Разберем на примере одного элемента списка:

• 

  ВАЛЛ-И

  релиз: 2008

• ............ ............
   

CSS

• Важно убедиться, что присутствуют эти три пункта: data-id - уникальный идентификатор data-type - добавление принадлежности к определенной категории указанной в меню rel="prettyPhoto[gallery]" - используется для открытия большого изображения по клику. Стили для оформления работ/фотографии:

  /*
  .image-block{ display:block;position: relative;}
  .image-block img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;}
  .image-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;}
  .portfolio-area li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px;}
  .home-portfolio-text{margin-top:10px;}

  Скрипт

• Теперь добавим скрипт для сортировки по категориям quicksand:

   // Clone applications to get a second collection
   var $data = $(".portfolio-area").clone();
   
   //NOTE: Only filter on the main portfolio page, not on the subcategory pages
   $('.portfolio-categ li').click(function(e) {
   $(".filter li").removeClass("active"); 
   // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
   var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
   
   if (filterClass == 'all') {
   var $filteredData = $data.find('.portfolio-item2');
   } else {
   var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
   }
   $(".portfolio-area").quicksand($filteredData, {
   duration: 600,
   adjustHeight: 'auto'
   }, function () {
  
   lightboxPhoto();
   }); 
   $(this).addClass("active"); 
   return false;
   });
  И скрипт для плагина prettyPhoto для просмотра больших изображений:
  jQuery("a[rel^='prettyPhoto']").prettyPhoto({
   animationSpeed:'fast',
   slideshow:5000,
   theme:'light_rounded',
   show_title:false,
   overlay_gallery: false
   });
   
   }