Tumblr Audio Player Bu on tumblr duvarcılık birlikte sonsuz kaydırmayı uygulanan

Question

Sonsuz kaydırma ile yüklenmemesi "[Flaş 9 ses dinlemek için gereklidir.]"

Inspire Well tumblr tema (ben başka köprüyü gönderemezsiniz ancak kolayca google olabilir) bu kod sayesinde bu sorunu çözmüş görünüyor

:

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

Bu fo uyarlamayı denedim

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

Ama metnin hiçbir iz yoktur: r benim tumblr (doğru elemanı bulmakta ise tutucu metinle görmek). Herhangi bir yardım büyük takdir edilecektir.

Answer 1

html

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

css

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

java İşte

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

Answer 2

Ben yarattığım şablonda aynı işlevi gerçekleştirmek için gerektiğinde ile geldi bir çözümdür .

HTML'nizde, yorumlarınız arasında AudioPlayer Tumblr etiketinizi ekleyin. Bu, yüklenmiş komut dosyalarının çağrılmasını engellemektir. Ayrıca, ses oynatıcısını bu gönderiye yükleyip yüklemediğimizi takip edip etmemek için "boşaltılan" bir sınıf ekleyin. sayfa yüklendikten sonra siz yorum koduna baktığımızda

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

, bir yerleştirme etiketi javascript fonksiyonları Tumblr birine geçirilen göreceksiniz. Bunu yorumladıktan sonra, yürütmeyecek. Bunun yerine, bu dizeyi ayıklamak ve div içeriğini onunla değiştirmek isteyeceğiz.

Bunu yapacak bir javascript işlevi oluşturun. Sayfa yüklendiğinde bir kez

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

Çağrı loadAudioPosts() sonra her seferinde sonsuz kaydırma yükleri: Bu benim şablon için nasıl yaptığını olduğundan bu normal javascript ile yapılabilir, ama ben jQuery ile yapacağım zaman kazanmak için ek mesajlar.