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 は関数ではありません (無名関数)

エラー: 

jQuery('#portfolio').mixitup({

私の関数実行コード:

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

画像とフィルター ボタンがまったく読み込まれません。これを Blogger で動作させるにはどうすればよいですか?

4

1 に答える 1

0

画像が表示されない問題を解決しました

  1. フィルターが正しいクラスをターゲットにしていることを確認してください。'item' フィルターには要素がなかったため、mixitup の追加は失敗しました。

  2. コンテナ用のいくつかの css クラスを追加します (codepen がある mixitup:s ホームページを見てください)。

画像が表示されなかったのは、フィルターが正しく設定されていなかったためです。

これを使用してトラブルシューティングを試みます。

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 に答える