尝试将此过滤器组合图库放在我的 Blogger (blogger.com) 上
How to Build a Filterable Animated Portfolio Layout
在 Blogger 模板头中,我添加了:
'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'
In page:
<div id="w">
<h1>Responsive Filter-Based Portfolio</h1>
<ul id="filter-list" class="clearfix">
<li class="filter" data-filter="all">All</li>
<li class="filter" data-filter="webdesign">Web Design</li>
<li class="filter" data-filter="appicon">App Icons</li>
<li class="filter" data-filter="iosappui">iOS App UI</li>
<li class="filter" data-filter="illustration">Illustration</li>
</ul><!-- @end #filter-list -->
<ul id="portfolio">
<li class="item webdesign"><a href="http://dribbble.com/shots/1332972-projekt-x-main-site"><img src="images/wordpress-theme-design.jpg" alt="wordpress theme"></a></li>
<li class="item illustration"><a href="http://dribbble.com/shots/1339026-Able-and-Baker"><img src="images/monkeys-in-space.jpg" alt="able baker space floating monkeys"></a></li>
<li class="item appicon"><a href="http://dribbble.com/shots/1337536-App-Icon"><img src="images/ios-contacts-app-icon.jpg" alt="contacts iphone app icon"></a></li>
<li class="item iosappui"><a href="http://dribbble.com/shots/1338313-MMORU-forum-app"><img src="images/forum-app-ui.jpg" alt="iphone app ui mobile forum"></a></li>
<li class="item iosappui"><a href="http://dribbble.com/shots/1322583-Profile-for-Thurstee-App-coming-soon"><img src="images/app-profile-screen.jpg" alt="thurstee profile app ui"></a></li>
<li class="item illustration"><a href="http://dribbble.com/shots/1338582-Bold-As-Love"><img src="images/jimi-hendrix-dribbble.jpg" alt="jimi hendrix illustration design"></a></li>
<li class="item webdesign"><a href="http://dribbble.com/shots/1338364-e-commerce-13"><img src="images/ecommerce-website-dribbble.jpg" alt="e-commerce design"></a></li>
<li class="item iosappui"><a href="http://dribbble.com/shots/1221413-Chat-app"><img src="images/iphone-chat-app.jpg" alt="purple ios chat app ui"></a></li>
</ul><!-- @end #portfolio -->
</div><!-- @end #w -->
我在 Chrome 控制台中遇到错误:
我的函数执行代码:
//<!CDATA[
jQuery(function(){
jQuery('#portfolio').mixitup({
targetSelector: '.item',
transitionSpeed: 450
});
});
//]]>
图像和过滤器按钮根本不加载。
如何让它在 Blogger 中工作?
最佳答案
我解决了没有图像显示的问题
图片不显示的原因是过滤器设置不正确。
尝试使用它来排除故障:
jQuery(function(){
$('#portfolio').mixItUp({
transitionSpeed: 450,
callbacks: {
onMixFail: function(state){
alert('No elements found matching '+state.activeFilter);
},
onMixEnd: function(state){
console.log(state.activeFilter);
}
}
});
});
关于jquery - jQuery 函数 mixitup() 中的错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28279090/