Фильтрация изотопа по URL

Question

Я пытаюсь отфильтровать мою страницу изотопа со ссылкой на URL-адрес, искал и пытался реализовать примеры, найденные здесь, но безрезультатно.

Вот страница изотопа: http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

А вот страница, которую я пытаюсь отфильтровать: http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php

Я перепробовала все вариации данных фильтра, # и? но ничто, кажется, не фильтрует результаты.

Любые идеи?

Answer 1

Изотоп не будет делать это изначально, вам нужно найти решение. Метод фильтра из родного API может помочь вам, но вы должны предоставить

Например, если вы хотите, чтобы отфильтровать элементы, принадлежащие класс как «холодный»

1. Вы можете создать страницу, которая принимает параметр с именем фильтр - например: http://www.yourdomain.com/page.html?filter=cold

2. Вы должны перехватывать строки запроса от Javascript, используя простую функцию нашли here и хранить его в querystringValue VARI возможность.

   var querystringValue = getParameterByName ('filter');

3. После загрузки Изотоп и готов - со всеми элементами, каждый из которых держит свой собственный класс фильтра - вы можете использовать фильтр метод для фильтрации строк запроса вы получили. Я предположим, что $ grid содержит ссылку на объект сетки.

   $ grid.isotope ({filter: querystringValue});

Это только одна из возможностей, но она работает. Конечно, вы должны закодировать механизм для обработки параметров запроса, которые не являются допустимыми возможными фильтрами.

Упование вы считаете это полезным.

Answer 2

Это решение работает на 100%

Например
если вы хотите пройти категорию фильтра из diffrent страницы затем написать ниже http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php#infographic

на изотопе этой странице http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

<ul class="filters"> 
    <li class="filter selected"><a href="#" data-filter="*">All</a></li><br> 
    <li class="filter"><a href="#" data-filter=".isotope-category- 
    infographic">Infographic</a></li> 
    <li class="filter"><a href="#" data-filter=".isotope-category- 
    motiongraphic">Motion graphic</a></li> 
</ul> 

<ul id="portfolio" class="masonry-grid "> 
    <li class="masonry-grid-item isotope-category-infographic">infographic 
    data</li> 
    <li masonry-grid-item isotope-category-motiongraphic>motion graphic 
    data</li> 
</ul> 

Теперь напишите ниже код в jQuery:

$(window).load(function(){ 
    var hashID = window.location.hash.substring(1); 

    /*$container is an isotope container.it may be different 
    a container is a wrapper for filter data 
    here is masonry-grid is a container*/ 

    $container.isotope({ filter: ".isotope-category-"+hashID }); 

    /*other filter selected logic you can apply to your HTML structure here*/ 

});