Добавление двух отфильтрованных галерей на одну страницу с помощью PrettyPhoto и Isotope (Шаблон)

Я пытаюсь добавить две отфильтрованные галереи, дублирующие раздел портфолио этого шаблона:

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

Я пытался:

  1. изменить атрибут фильтра данных

    <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. Измените атрибут 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>
    
  3. Редактирование раздела 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;
        });
    
    });
    

Но я не могу отделить действие фильтров от двух галерей, не могу сделать их независимыми.


person F.T.    schedule 16.01.2018    source источник


Ответы (1)


Я наконец нашел решение:

  1. Я сделал две копии всей секции изотопов, во второй поменял селекторы: .portfolio-items в .portfolio-items2, cat в cat2 и data-filter в data-filter2

  2. Затем я заменил в HTML-файле классы .portfolio-itmes и cat второй галереи и атрибут data-filter новыми именами.

person F.T.    schedule 15.02.2018