5

尝试将此过滤器组合库放在我的 Blogger (blogger.com) 上 如何构建可过滤的动画组合布局

在 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'

在页面中：

<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 控制台中遇到错误：

Uncaught TypeError:undefined is not a function（匿名函数）

错误： 

jQuery('#portfolio').mixitup({

我的函数执行代码：

//<!CDATA[
jQuery(function(){
    jQuery('#portfolio').mixitup({
        targetSelector: '.item',
        transitionSpeed: 450
    });
});
//]]>

图像和过滤器按钮根本不加载。如何让它在 Blogger 中工作？

4

1 回答 1

0

I solved the problem no images showing

  1. Make sure that the filter is targeting the right class. The 'item' filter didn't have any elements so therefore the mixitup added fail.

  2. Add some css classes for container (look at mixitup:s homepage where there are codepen)

Why the images didn't show was because the filter wasn't set right.

Try to use this to troubleshoot: 

jQuery(function(){
    $('#portfolio').mixItUp({
        transitionSpeed: 450,

        callbacks: {
            onMixFail: function(state){
                alert('No elements found matching '+state.activeFilter);
            },
            onMixEnd: function(state){
                console.log(state.activeFilter);
            }
        }
    });
});
于 2015-02-02T22:06:22.993 回答