Tumblr Audio Player не се зарежда с Infinite Scroll

Приложих безкрайно превъртане заедно със зидария на този tumblr: [проверете версията за връзка]

Аудио плейърът не се показва в публикации, заредени чрез безкрайно превъртане, вместо това показва текста „[Изисква се Flash 9 за слушане на аудио.]“

Темата Inspire Well tumblr (не мога да публикувам друга хипервръзка, но можете лесно да я потърсите в Google) изглежда е решила този проблем чрез този код:

if(InspireWell.infiniteScrolling && InspireWell.indexPage){
  $masonedColumn.infinitescroll({
    navSelector  : 'ul.page_nav',  // selector for the paged navigation 
    nextSelector : 'ul.page_nav li.page_next a',  // selector for the NEXT link (to page 2)
    itemSelector : '.post',     // selector for all items you'll retrieve
    loadingImg : '',
    donetext  : 'No more pages to load.',
    errorCallback: function() { 
      // fade out the error message after 2 seconds
      //$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
    }
  },
  // call masonry as a callback
  function( newElements ) { 

    $(newElements).css({ visibility: 'hidden' });

    $(newElements).each(function() {
      if($(this).hasClass("audio")){
        var audioID = $(this).attr("id");
        var $audioPost = $(this);
        $audioPost.find(".player span").css({ visibility: 'hidden' });

        var script=document.createElement('script');
        script.type='text/javascript';
        script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";

        $("body").append(script);

        $.ajax({
        url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
          dataType: "jsonp",
          timeout: 5000,
          success: function(data){
            $audioPost.find(".player span").css({ visibility: 'visible' });
            $audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
          }
        });
      }
    });

Опитах се да адаптирам това за моя tumblr (с запазен текст, за да видя дали намира правилния елемент):

 $(window).load(function(){
   $('#allposts').masonry({
     singleMode: true,
     itemSelector: '.box' 
   });
   $('#allposts').infinitescroll({
     navSelector : "div.navigation",
     nextSelector : "div.navigation a:first",
     itemSelector : ".box",
     debug : true
   },
     function( newElements ) {
       $(this).masonry({ appendedContent: $( newElements ) });
       $(newElements).each(function(){
         if($(this).hasClass("audio")){
           var audioID = $(this).attr("id");
       var $audioPost = $(this);
       $audioPost.find(".audio span");
           var script=document.createElement('script');
           script.type='text/javascript';
           script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
           $("body").append(script);
       $.ajax({
         url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
     dataType: "jsonp",
     timeout: 5000,
     success: function(data){
       $audioPost.find(".audio span");
       $audioPost.find("span:first").append("<p>audio player not working</p>");
         }
       });
         }
       });
     }
   ); 
});

Но от текста няма и следа. Всяка помощ ще бъде високо оценена.


audio-player tumblr
person Grant    schedule 18.11.2010    source източник

Отговори (2)


arrow_upward
2
arrow_downward

Ето едно решение, което измислих, когато трябваше да внедря същата функционалност в шаблона, който създавах.

Във вашия HTML включете вашия AudioPlayer Tumblr таг между коментарите. Това е за предотвратяване на извикване на заредени скриптове. Също така добавете клас "unloaded", за да следите дали сме заредили аудио плейъра за тази публикация или не.

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

Ако погледнете коментирания код, след като страницата е заредена, ще забележите, че маркер за вграждане се предава на една от функциите на javascript на Tumblr. Тъй като го коментирахме, няма да се изпълни. Вместо това ще искаме да извлечем този низ и да заменим съдържанието на 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() веднъж при зареждане на страницата, след това всеки път, когато безкрайното ви превъртане зареди допълнителни публикации.

person Daniel    schedule 15.10.2012

arrow_upward
1
arrow_downward

html

<div class="audio" id="{postID}">{AudioPlayerBlack}</div>

css

.audio {
        height:30px;
        overflow-y: hidden;
    }
.audio span {
        display:none;
    }

java

setTimeout(function() {
                        $wall.masonry({ appendedContent: $(newElements) });
                        /* repair audio players*/
                        $('.audio').each(function(){
                            var audioID = $(this).attr("id");
                            var $audioPost = $(this);
                            $.ajax({
                                url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID,
                                dataType: 'jsonp',
                                timeout: 50000,
                                success: function(data){
                                    $audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
                                }
                            });
                        });


                    }, 2000);
person yoolk    schedule 08.02.2011
comment
Yoolk, извинявай, ако съм глупав, но би ли искал да обясниш отговора си малко по-подробно? Как може да се реши този проблем? - person ; 08.02.2011