3

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

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

做了一些研究并找到了解决方案。这里有一个（这个也是），这里是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

By default the API will return a white audio player. you can change it by using the jQuery method to replace the flash player with a black or white player respectively.

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

or simply change the color itself

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

Example:

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

I had a lot of trouble with this and hope it helps someone out. I found the above information here Change Tumblr audio player color with Javascript.

于 2012-10-10T07:07:27.960 回答
2

我注意到了一些事情，这是我建议您尝试的：

  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 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).

  2. As for position, I did it like this:

    function (newElements) {

   ....

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

   //audio repair goes here!

}
于 2012-04-16T07:22:17.203 回答
1

Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.

In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.

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

If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.

Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:

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");
    });
}

Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.

于 2012-10-15T14:12:16.200 回答