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>

修改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;
    });

});

但我不能将过滤器的动作与两个画廊分开，我不能让它们独立。

Answer 1

我终于找到了解决方案：

我在第二个中制作了两个完整同位素部分的副本一个我改变了选择器：.portfolio-items in .portfolio-items2中的cat，cat2和data-filter中的data-filter2
然后我在HTML文件中替换了.portfolio-itmes和cat 第二个库的类和data-filter属性的新名称。

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

1 个答案: