7

私はプログラミング（javascript）の初心者ですが、tumblrのテーマを正しく機能させるために、過去数日間かなりの調査を行いました。私の質問が一般的であることは知っていますが、多くの同様の例で与えられたコードの一部を正しく統合するのに十分な知識がないようです。

私のテーマは、tumblr の「1 ページあたり 15 の投稿」という制限をオーバーライドし、「エンドレス スクロール」オプションを使用すると、すべての投稿 (すべての写真) を 1 つのエンドレス ページに配置する必要があります。まあ、そうではありません。hereからの少しの助けを借りて、私は {block:Posts} を でラップすることができ、 masonry() 呼び出しでいくつかのランダムな変更を加えて、これになりました

ご覧のとおり、私の写真は重なり合っていません (ついに!) が、最初の 15 回の投稿の後、新しいページが作成され、最後の写真が正しく配置されていないように見えます。

私のjQuery石積みコードはこれです:

<script type="text/javascript">

$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>

私は知っています、それは混乱しています...本当に助けていただければ幸いです。

4

1 に答える 1

0

私は tumblr での作業に慣れていませんが、何が起こっているのかを知ることができます:

110行目:

このスクリプトは、masonry を呼び出すたびにエントリの周りにラッパー div を作成しています。スクリプトにより、各読み込みは新しいページのように見えます。単純に削除できると思います。

いくつかのヒント: $(windows).load を待つ必要はなく、$(function() で変更します。

画像のオーバーラップを避けるには、追加された石積みメソッドと imagesLoad を使用します。これを参照してください。

Masonry 1.0.1 を使用しているようですが、Masonry の最新バージョン (2.1.06) を使用していることを確認してください。

コード例:

$(function() {
    //$('.autopagerize_page_element').masonry();
    var $container = $('.autopagerize_page_element');
    //wait until images are loaded
    $container.imagesLoaded(function(){
      $container.masonry({itemSelector: '.entry'});
    });
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
    }
);
});

このヘッダー ブロックの最後のスクリプトを必ず削除してください。

    <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
    <script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
    <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->

それが役に立てば幸い

于 2013-01-03T10:58:47.543 に答える