0

jquery Isotope モジュールを使用して、従来の Masonry スタイルのレイアウトでループを整列させるのに問題があります。

すべてのブラウザはコンソールでスクリプトを正常にロードしていますが、属性はまったく機能していないようです。.item クラスの div 要素の位置合わせはすべて、左側が右上で、水平方向に積み重ねられています。

Wordpress には何らかの継承があり、動作を妨げていますか? 他のプラグインを使用せずにワードプレスのデフォルトの TwentyTwelve テーマでこれを試していますが、それは posin:fixed; にあります。div でページの下 50% にラップします。

    <script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js">
    $(document).ready(function(){
        $('#container').isotope({
            $container.isotope({
                itemSelector:'.item'
            });
      masonry: {
        columnWidth: 20
      };

    });
            </script>

html への呼び出しが続きます。

                 <div id="container" >
                    <div class="item">
                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                            <?php if (has_post_thumbnail()) {
                                the_post_thumbnail('thumbnail');
                            }?>

                            <h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <?php the_excerpt(); ?>
                        <?php endwhile; endif; ?>
                    </div>
                </div>

これらの適用可能な CSS 属性を使用すると、問題にはならないと思います...

    #container {
        position:relative;
    }
    .item {
        width:50px;
        height:auto;
        border:1px;
    }

現在の実例はこちら: justingaskin.com

4

2 に答える 2

1

私はあなたがisotope2回電話していると思います、それはこのように見えるはずです

$( '#コンテナ' ).isotope({

itemSelector : '.item',
masonry : { columnWidth: 20 }

});

編集

isotopeWordpress サイトを見てみると、 jQuery ファイルが正しくロードされていません。現在、コンソールをチェックアウトすると、リクエストがjquery.isotope.js失敗したことがわかります。isotopeファイルの場所は次のとおりです。

http://justingaskin.com/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js

そしてあなたのサイトでは：

http://justingaskin.com/js/jquery.isotope.js

<script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js"> <-- これは間違っています

そのはず：

script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js">

于 2013-05-03T17:01:48.797 に答える
0

それは間違いなく継承の問題だったようです。Wordpress に付属する TwentyTwelve テーマを再フォーマットする場合 (現在、投稿日現在)、整理しようとしていたアイテムに流れる (カスケード... Hernt) スルー ファクターがあります。

このリンクからのチュートリアルとガイダンスの使用: http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/

ループスレートをきれいに拭き取り、最初に制御する必要のある要素に css の新しいコートをスクラブすることができました。

助けてくれてありがとう @c-misura !

于 2013-05-04T18:35:14.037 に答える