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?

You can check out my awful template at http://sofiaperssons.blogspot.se/p/portfolio.html (I've cleaned the blogger template so only the css for the demo is active) — Sofia, Feb 02 '15 at 14:00
You include jQuery twice. This results in `.mixItUp` being `undefined`. Remove `` before `` — Regent, Feb 02 '15 at 15:57
Thanks for answer, but it still doesn't work. I have removed the Flexslider so that nothing interfer with the portfolio. http://sofiaperssons.blogspot.se/p/portfolio.html — Sofia, Feb 02 '15 at 19:26
I can see that when looking at the code that the mixitup adds a "fail" `
` — Sofia, Feb 02 '15 at 19:52
after some testing and writing the state class, the active state is `.mix` and that class is in the original demo but not on this tutorial script. Has this something to do with that nothing executes? — Sofia, Feb 02 '15 at 20:31
I have somehow figure out that the mixitup formula runs on the original class .mix.. so I replaced all .item with .mix and the filter like `
@Sofia Surprisingly your code sample works perfectly fine with me. Could you please post your complete html document in the question with all script tags and JavaScript code? — Rahul Raut, Mar 15 '19 at 07:22

score 0 · Answer 1 · edited Jun 01 '16 at 15:43

I solved the problem no images showing

Make sure that the filter is targeting the right class. The 'item' filter didn't have any elements so therefore the mixitup added fail.
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);
            }
        }
    });
});

Error in jQuery function mixitup()

1 Answers1