使用 PrettyPhoto 和 Isotope（模板）在同一页面上添加两个过滤画廊

Question

我正在尝试添加两个过滤画廊以复制此模板的投资组合部分：

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>

将图库 1 的 rel="prettyPhoto" 属性更改为 prettyPhoto1，第二个图库更改为 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>

编辑 isotope 部分中的 main.js 更改 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;
    });

});

但我无法将过滤器的作用与两个画廊分开，我无法使它们独立。

Answer 1

我终于找到了解决方案：

我把整个同位素部分复制了两份，第二份一个我改变了选择器：.portfolio-items in .portfolio-items2、cat 在 cat2 和 data-filter 在 data-filter2
然后我在 HTML 文件中替换了 .portfolio-itmes 和 cat 第二个图库的类和带有的 data-filter 属性新名字。

使用 PrettyPhoto 和 Isotope（模板）在同一页面上添加两个过滤画廊

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

gallery

filter

jquery-isotope

prettyphoto