[英]Integrating Isotope with BBQ hash history
I know it's a popular question but I'm struggling a little with the tutorial on the Isotope site to develop my current Isotope to use BBQ hash history . 我知道这是一个很普遍的问题,但是我在同位素网站上的教程上稍作努力,以开发当前的同位素以使用BBQ哈希历史记录 。
I am essentially trying to add BBQ hash history to my current set up so I can link directly to the filtered content. 我实质上是想将BBQ哈希历史记录添加到当前设置中,以便可以直接链接到过滤后的内容。
This is my jQuery code so far, which works perfectly. 到目前为止,这是我的jQuery代码,效果很好。
jQuery(function () {
var $container = jQuery('.wwd-content-container');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.each-wwd-content',
filter: '.corporate'
});
});
jQuery('.wwd-filters a').click(function () {
jQuery('a.active-filter').removeClass('active-filter');
jQuery(this).addClass('active-filter');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
And I have changed my filter navigation from: 而且我从以下位置更改了过滤器导航:
<li><a href="#" data-filter=".<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>
to 至
<li><a href="#filter=.<?php echo esc_attr( $page_class ) ?>"><?php the_title(); ?></a></li>
I am using Wordpress hence the $page_class variables etc — but don't spend too much time on that. 我使用的是Wordpress,因此使用的是$ page_class变量等,但不要花太多时间。
Thanks and any help would be most appreciated. 谢谢,任何帮助将不胜感激。 R
[R
UPDATE 更新
This is what I have so far... 这是我到目前为止所拥有的...
jQuery(function () {
var $container = jQuery('.wwd-content-container');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.each-wwd-content',
filter: '.corporate'
});
});
jQuery('.wwd-filters a').click(function () {
jQuery('a.active-filter').removeClass('active-filter');
jQuery(this).addClass('active-filter');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
jQuery('.wwd-filters a').click(function(){
// get href attr, remove leading #
var href = jQuery(this).attr('href').replace( /^#/, '' ),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam( href, true );
// set hash, triggers hashchange on window
$.bbq.pushState( option );
return false;
});
jQuery(window).bind( 'hashchange', function( event ){
// get options object from hash
var hashOptions = $.deparam.fragment();
// apply options from hash
$container.isotope( hashOptions );
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');
});
It looks like you've gotten rid of the value for your variable selector
, since your a tag no longer has an attribute of data-filter
. 看起来您已经摆脱了变量
selector
的值,因为您的标记不再具有data-filter
的属性。 If you set a breakpoint to get the value of selector
, you'll see it returns undefined
instead of something like .corporate
or any of your other values. 如果设置断点以获取
selector
的值,则会看到它返回undefined
的值,而不是诸如.corporate
之类的.corporate
或其他任何值。 This means Isotope doesn't filter anything anymore. 这意味着同位素不再过滤任何东西。
Have a good look over the documentation for this, linked below. 请仔细阅读以下链接的文档。 http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html
http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html
Your click event function should look more or less like the documentation, particularly the section titled ' jQuery script '. 您的click事件函数应大致上与文档类似,尤其是标题为“ jQuery脚本 ”的部分。 This function grabs the selector from the href value, filters your instance of Isotope, and then pushes it through BBQ hash history management.
此函数从href值中获取选择器,过滤您的同位素实例,然后将其推送到BBQ哈希历史记录管理中。
I would make sure you have a function bound to hashchange
as well, exactly what is written in the documentation. 我会确保您也有一个绑定到
hashchange
的函数,也正是文档中所写的内容。 It's very important to make sure you are hooking into BBQ's hashchange
event to make your filtered content bookmarkable. 确保您加入BBQ的
hashchange
事件以使过滤后的内容可设置书签非常重要。
UPDATE 更新
You've got two functions hooked up on click. 点击时,您已经获得了两个功能。 You really only need the second one which will then fire the Isotope filter from the
hashchange
event. 您实际上只需要第二个,它将从
hashchange
事件中触发同位素过滤器。
Have a look at the following code and compare to your earlier example: http://jsfiddle.net/HWwa4/1/ 看一下下面的代码,并与之前的示例进行比较: http : //jsfiddle.net/HWwa4/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.