サポート » 使い方全般 » jquery masonry がうまく動作しない

  • 解決済 @kan

    (@kan-1)


    素人では何が悪いのか分かりませんでした。
    お時間よろしければお知恵の方拝借させて下さい。

    Instant WordPressでローカル作業でうまくいったのですが、
    実際どう動くのか確認するために 「sitemix」 のレンタルサーバーに移したところうまく動作しませんでした。

    Instant WordPressは導入時「3.4」だったのでアップグレードして「3.5.1」にした物です。
    動作確認サイトはこちらです。

    http://prototypehome2.sitemix.jp/

    ローカル環境では

    <?php wp_enqueue_script('masonry', get_bloginfo('template_url') . '/js/jquery.masonry.min.js',array(jquery)); ?>

    でうまく動いていました。

    こちらの
    http://wordpress.org/support/topic/jquery-masonry-plugin-neewbie-troubles?replies=2
    サイトの下部の

    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.masonry.min.js" type="text/javascript"></script>

    も試してみましたがうまくいきませんでした。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • @kanさん、こんにちは。

    jquery.masonry.min.js は正常に読み込まれているようです。
    http://prototypehome2.sitemix.jp/wp-content/themes/sample3/js/jquery.masonry.min.js

    どのテンプレートを使っているのかが分らないので、
    正常な表示が分らないのですが、
    style.css の .post に、
    float: left;
    が抜けている気がします。

    トピック投稿者 @kan

    (@kan-1)

    回答有り難うございます。
    テンプレートは自作の物を使っています。

    ご指摘のように、
    style.css の .post に、

    float: left;

    を記述したところ、フッターのラインが上に来たので、フッターに

    clear: both;

    を付けて修正前と同じような見た目に戻すことが出来ました。

    しかし、一見jqueryが動いているように見えますが、記事一つ一つにfloatが働いているため
    幅を小さくすると横に表示される記事数がきちんと減りますが、
    指定した 

    isAnimated

    isFitted

    などの動作がうまくいっていないようです。

    トピック投稿者 @kan

    (@kan-1)

    自己解決しました。

    jQueryのカプセル化

    (function($) {

    $(function(){
    $(‘#container’).masonry({
    itemSelector: ‘.post’,
    isFitWidth: true,
    isAnimated:true,
    });
    });

    })(jQuery);

    と記述した物を読み込ませたところうまく動作しました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「jquery masonry がうまく動作しない」には新たに返信することはできません。