Adding two filtered galleries on the same page with PrettyPhoto and Isotope (Template)

Question

I'm trying to add two filtered galleries duplicating the portfolio section of this template:

http://www.free-css.com/free-css-templates/page221/helios

I've tried to:

1. modify the data-filter attribute

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

2. Change the rel="prettyPhoto" attribute to prettyPhoto1 for gallery 1 and prettyPhoto2 for the second gallery:

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

3. Editing the main.js in isotope section changing the value of 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;
       });
   
   });
   

But I can't separate the action of the filters from the two galleries, I can't make them independent.

Answer 1

I finally found the solutuion:

1. I've made two copies of the entire isotope section, in the second one i've changed the selectors: .portfolio-items in .portfolio-items2, cat in cat2 and data-filter in data-filter2

2. Then i've replaced in the HTML file the .portfolio-itmes and cat classes of the second gallery and the data-filter attribute with the new names.