tumblr音频/视频播放器+无限滚动砌体

问题描述

这是一个测试页: http://masonry-test.tumblr.com/

我在tumblr上使用无限滚动的jquery Masonry.一切都很好，除了音频播放器.他们不会在第二页上加载并显示此消息，而是[需要Flash 9才能收听音频.]

I'm using jquery Masonry with infinite scroll on tumblr. All is fine except with audio players. They won't load on the second page and display this message instead [Flash 9 is required to listen to audio.].

进行了一些研究，找到了解决方案.在此处()，这是网状主题成功完成了这一任务(第35行).

Did a little research and found a solution. One here (this one too) and here's the js from the Mesh theme that does that successfully (line 35).

问题是我不知道在哪里以及如何在我的代码中实现它.我尝试的所有方法都不起作用，或者在砌块周围留下了很小的缝隙.我的代码:

Problem is I don't know where and how to implement it in my code. Everything I tried either wasn't working or it left a small gap around the masonry blocks. My code:

    $(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();
    });

});

推荐答案

我注意到了几件事，这是我建议您尝试的方法:

I noticed a few things and this is what I advise you to try:

1. 为使该脚本正常工作，类别为"audio"的元素应分别具有带有帖子ID的"id"属性. HTML看起来应该像这样:

1. For that script to work, the elements with the class "audio" should each have an "id" attribute with the post ID. The HTML should look like that:

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

Tumblr会自动用每个帖子的ID填充{PostID}部分.我想它对视频的工作方式相同(尚未在视频中尝试过).

Tumblr will automatically fill the {PostID} part with the ID for each post. I suppose it works in the same manner for videos (haven't tried it with videos yet).

至于职位，我是这样的:

As for position, I did it like this:

function (newElements) {

   ....

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

   //audio repair goes here!

}

这篇关于tumblr音频/视频播放器+无限滚动砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！