Я пытаюсь добавить две отфильтрованные галереи, дублирующие раздел портфолио этого шаблона:
http://www.free-css.com/free-css-templates/page221/helios
Я пытался:
изменить атрибут фильтра данных
<ul class="cat"> <li> <ol class="type"> <li><a href="#" data-filter="*" class="active">All</a></li> <li><a href="#" data-filter=".web">Web Design</a></li> <li><a href="#" data-filter=".app">App Development</a></li> <li><a href="#" data-filter=".branding">Branding</a></li> </ol> </li> </ul>
Измените атрибут
rel="prettyPhoto"
на prettyPhoto1 для галереи 1 и на prettyPhoto2 для второй галереи:<div class="portfolio-item"> <div class="hover-bg"> <a href="img/portfolio/01.jpg" rel="prettyPhoto"> <div class="hover-text"> <h4>Project Title</h4> <small>Web Design</small> <div class="clearfix"></div> </div> <img src="img/portfolio/01.jpg" class="img-responsive" alt="Project Title"> </a> </div> </div>
Редактирование раздела
main.js
в разделеisotope
с изменением значенияdata-filter
:/*==================================== Portfolio Isotope Filter ======================================*/ $(window).load(function() { var $container = $('.portfolio-items'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.cat a').click(function() { $('.cat .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); });
Но я не могу отделить действие фильтров от двух галерей, не могу сделать их независимыми.