Error in jQuery function mixitup()

Question

Trying to put this filter portfolio gallery on my Blogger (blogger.com) How to Build a Filterable Animated Portfolio Layout

In Blogger template head I added:

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

I got an error in chrome console:

Uncaught TypeError:undefined is not a function (anonymous function)

error on:

jQuery('#portfolio').mixitup({

My function execute code:

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

The images and filter buttons doesn't load at all. How to I get this to work in Blogger?

Answer 1

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);
            }
        }
    });
});