title: tumblr audio/video players + Masonry with infinite scroll
body: <p>Here's a test page: <a href="http://masonry-test.tumblr.com/" rel="nofollow noreferrer">http://masonry-test.tumblr.com/</a></p>
  
  <p>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.].</p>
  
  <p>Did a little research and found a solution. One <a href="https://stackoverflow.com/questions/10149882/infinite-scroll-breaks-flash">here</a> (<a href="https://stackoverflow.com/a/4928574/351320">this one too</a>) and here's <a href="http://pastie.org/3792999" rel="nofollow noreferrer">the js</a> from the <a href="http://meshtheme.tumblr.com/" rel="nofollow noreferrer">Mesh theme</a> that does that successfully (line 35).</p>
  
  <p>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:</p>
  
  <pre><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();
      });
  
  });
  </code></pre>