3

ここにテストページがあります: http://masonry-test.tumblr.com/

tumblrで無限スクロールのjquery Masonryを使用しています。オーディオプレーヤー以外はすべて問題ありません。2 ページ目ではロードされず、代わりにこのメッセージが表示されます [音声を聞くには Flash 9 が必要です]。

少し調査を行い、解決策を見つけました。ここに1つ(これも)、これを正常に実行するMesh テーマの jsがあります(35 行目)。

問題は、コードのどこにどのように実装するかわからないことです。私が試したことはすべてうまくいかなかったか、石積みブロックの周りに小さな隙間が残っていました. 私のコード:

    $(document).ready(function () {

    var $container = $('.row');

    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 1
        });
    });


    $container.infinitescroll({
        navSelector: '#page-nav',
        nextSelector: '#page-nav a',
        itemSelector: '.post',
        loading: {
            finishedMsg: "No more entries to load.",
            img: "http://static.tumblr.com/7wtblbo/hsDlw78hw/transparent-box.png",
            msgText: "Loading..."
        },
        debug: true,
        bufferPx: 5000,
        errorCallback: function () {
            $('#infscr-loading').animate({
                opacity: 0.8
            }, 2000).fadeOut('normal');
        }
    },

    function (newElements) {

    //tried this but doesn't work

        /* repair video players*/
        $('.video').each(function(){
            var audioID = $(this).attr("id");
            var $videoPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $videoPost.append('\x3cdiv class=\x22video_player_label\x22\x3e' + data.posts[0]['video-player'] +'\x3c/div\x3e');
                    }
                }
            });
        });  

        /* repair audio players*/
        $('.audio').each(function(){
            var audioID = $(this).attr("id");
            var $audioPost = $(this);
            $.ajax({
                url: '/api/read/json?id=' + audioID,
                dataType: 'jsonp',
                timeout: 50000,
                success: function(data){
                    $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                    }
                }
            });
        }); 

        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems, true);
        });
    });


    $(window).resize(function () {
        $('.row').masonry();
    });

});
4

3 に答える 3

3

デフォルトでは、API は白いオーディオ プレーヤーを返します。jQuery メソッドを使用して、Flash Player をそれぞれ黒または白のプレーヤーに置き換えることで変更できます。

.replace("audio_player.swf", "audio_player_black.swf")

または単に色自体を変更する

.replace("color=FFFFFF", "color=EA9D23");

例：

$('.audio').each(function(){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $.ajax({
            url: '/api/read/json?id=' + audioID,
            dataType: 'jsonp',
            timeout: 50000,
            success: function(data){
                $audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'].replace("audio_player.swf","audio_player_black.swf") +'\x3c/div\x3e');
                }
            }
        });

私はこれに多くの問題を抱えていましたが、それが誰かを助けることを願っています. 上記の情報はこちらChange Tumblr audio player color with Javascriptで見つけました。

于 2012-10-10T07:07:27.960 に答える
2

私はいくつかのことに気づきました、そしてこれは私があなたに試すことを勧めるものです：

  1. そのスクリプトが機能するためには、クラス「audio」を持つ要素がそれぞれ、投稿IDを持つ「id」属性を持っている必要があります。HTMLは次のようになります。

    <div class="audio" id={PostID}>{AudioPlayerWhite}</div>

    Tumblrは、{PostID}の部分に各投稿のIDを自動的に入力します。ビデオでも同じように機能すると思います（まだビデオで試していません）。

  2. 位置に関しては、私はこのようにしました：

    function (newElements) {

   ....

   $newElems.imagesLoaded(function () {
       ....
   });

   //audio repair goes here!

}
于 2012-04-16T07:22:17.203 に答える
1

作成中のテンプレートに同じ機能を実装する必要があったときに思いついたソリューションを次に示します。

HTML で、コメントの間に AudioPlayer Tumblr タグを含めます。これは、読み込まれたスクリプトが呼び出されないようにするためです。また、「unloaded」クラスを追加して、この投稿のオーディオ プレーヤーをロードしたかどうかを追跡します。

...
{block:AudioPlayer}
    <div class="audio-player unloaded">
        <!--{AudioPlayerBlack}-->
    </div>
{/block:AudioPlayer}
...

ページが読み込まれた後にコメント付きのコードを見ると、embed タグが Tumblr の JavaScript 関数の 1 つに渡されていることがわかります。コメントしたので、実行されません。代わりに、この文字列を抽出して div の内容を置き換えます。

これを行う JavaScript 関数を作成します。これは通常の JavaScript で実行できますが、時間を節約するために jQuery で実行します。これは、テンプレートで行った方法です。

function loadAudioPosts() {
    // For each div with classes "audio-player" and "unloaded"
    $(".audio-player.unloaded").each(function() {

        // Extract the <embed> element from the commented {AudioPlayer...} tag.
        var new_html = $(this).html().substring(
            $(this).html().indexOf("<e"),    // Start at "<e", for "<embed ..."
            $(this).html().indexOf("d>")+2   // End at "d>", for "...</embed>"
        );

        // Replace the commented HTML with our new HTML
        $(this).html(new_html);

        // Remove the "unloaded" class, to avoid reprocessing
        $(this).removeClass("unloaded");
    });
}

loadAudioPosts()ページの読み込み時に 1 回呼び出してから、無限スクロールで追加の投稿が読み込まれるたびに呼び出します。

于 2012-10-15T14:12:16.200 に答える