jQuery同位素過濾器從不同的頁面WordPress的

Question

我想從一個完全不同的頁面過濾到我的同位素在哪裏。

目前，我成功地調用同位素有：

$(function() { 
    // cache container 
    var $container = $('.isotope-container'); 
    var $defaultfilter = $('.feature-this'); 
    $('.isotope-container').isotope({ 
     filter: '.feature-this', 
     masonry: { columnWidth: 326, resizesContainer: false } 
    }); 

    // filter items when filter link is clicked 
    $('#filters a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 
    // set selected menu items 
    var $optionSets = $('.option-set'), 
     $optionLinks = $optionSets.find('a'); 

     $optionLinks.click(function(){ 
      var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 
    }); 
}); 

我想，從另一個頁面，點擊一個鏈接時，篩選結果，與像標記：

<ul> 
     <li><a href="/isotope/#filter=.filter1">Filter 1</a></li> 
     <li><a href="/isotope/#filter=.filter2">Filter 2</a></li> 
     <li><a href="/isotope/#filter=.filter3">Filter 3</a></li> 
     <li><a href="/isotope/#filter=.filter4">Filter 4</a></li> 
     <li><a href="/isotope/#filter=.filter5">Filter 5</a></li> 
    </ul> 

我不能讓它工作。它的工作原理在這裏需要的，但不能從不同的頁面：

http://isotope.metafizzy.co/demos/hash-history.html

Answer 1

我有隻爲你解答 - 我寫了一篇博客文章關於它;

Isotope Filtering from different Wordpress Page

只是爲了鏈接腐等我會在這裏複製出來。我使用了jQuery cookie插件，創建並銷燬了一個傳遞給包含Isotope的頁面的cookie。在我的情況下，header.php中的每個頁面上都有一個永久性的過濾器主菜單。然而，我使用這段代碼爲菜單提供了一個不同的類，具體取決於用戶是在主頁上（其上有同位素）還是另一個頁面;

<?php 

if (is_front_page()) { 
    echo '<ul id="filters">'; 
} else { 
    echo '<ul id="cookiefilter">'; 
} 

?> 

然後JavaScript的改變，這樣，如果被點擊的鏈接是cookiefilter的菜單（關同位素頁）的一部分，那麼#cookiefilter a單擊事件被解僱和cookie的創建。下面的代碼塊基於cookie過濾同位素，然後銷燬它。它所在的網站是;

http://www.face-educationmarketing.co.uk

要看到它的行動作出解釋。主頁上有同位素，「工作」標題下的所有條目都是同位素過濾器。 '關於'標題是一個WP菜單，點擊'關於'下的其中一個鏈接，你將被帶到不同的WP頁面。在該頁面上，您將檢查工作篩選器列表中標記的更改 - ul類已更改，現在是;

<ul class="cookiefilter"> 

而不是;

<ul class="filters"> 

這是最重要的一點，因爲在下面的JS，上#filters a click事件表現不同點擊#cookiefilter a

事件在一個cookie與在它的過濾器名稱創建後一種情況。 onload JS檢查是否存在這樣的cookie，如果它存在，那麼它會調用Isotope，用cookie中的值過濾它，然後銷燬cookie，以便正常的過濾器工作。這是JS;

// filter items when filter link is clicked 
    $('#filters a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 

    // Set cookie based on filter selector 
    $('#cookiefilter a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $.cookie("listfilter", selector, { path: '/' }); 
    }); 

    if ($.cookie("listfilter")) { 
     $container.isotope({ filter: $.cookie("listfilter") }); 
     $.cookie("listfilter", null, { path: '/' }); 
     return false; 
    } 

添加「活動」類的鏈接

基礎上，評論一些更多的信息。一個很好的問題是，如何將一個類添加到活動過濾器中，以便您可以應用CSS來向用戶顯示過濾器處於活動狀態？

我已經使用以下JS在我自己的主頁（http://www.mcnab.co）上完成了這項工作。看看標頭右側的Magento，Wordpress，Joomla部分。那些是同位素過濾器。

此腳本清除無序列表中包含的鏈接中的所有類，其ID爲filters當按下鏈接並在反射同位素之前將類「活動」添加到單擊的鏈接;

var $filterlist = $('ul#filters'); 
    // filter items when filter link is clicked 
    $('#filters a').click(function(){ 
     $this = $(this); 

     var selector = $(this).attr('data-filter'); 

     // Remove classes from all filters 
     $filterlist.find('a').each(function(){ 
      $(this).removeClass(); 
     }); 

     // add active class to clicked filter 
     $this.addClass('active'); 

     // refire isotope using the newly clicked filter 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 

要做到這一點從另一個頁面，你會增加一個類似的腳本，其發現的日期過濾器屬性的鏈路與相同的cookie的#cookiefilter a和「主動」類添加到。