Infinite scroll breaks flash

Question

I am nearly finished creating the tumbler theme below. The theme uses the infinite scroll plugin and this works fine for posts that don't contain flash (photo, text, ...). Video and audio posts use flash and when the infinite scroll kicks in loading more posts it doesn't load in the flash posts. I can't under stand why, can anyone please help as a deadline is looming?

http://penguinenglishlibrary.tumblr.com/

Answer 1

Turns out I needed to loop through the posts and call the tumblr api to get the embed code for the audio post.

I have put the code in below hopefully it will help someone:

1. I have the folowing html code in the tumblr theme:

   {block:Posts}

   <div id="{PostID}" class="posts {block:Photo}photo-post{/block:Photo} {block:Video}video-post{/block:Video} {block:Audio}audio-post{/block:Audio} {block:Photoset}photoset-post{/block:Photoset}">
   

2. Then inside the callback (see below) for masonry I have the following code:

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

The callback code looks like:

if($content.infinitescroll) {

    $content.masonry({
        itemSelector: '.posts',
        //columnWidth: 235,
        isAnimated: true
    }),    
    $content.infinitescroll({
        navSelector    : 'div#pagination',  
        nextSelector   : 'div#pagination div#nextPage a', 
        itemSelector   : '.posts',
        loading: {
            finishedMsg: '',
            img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
        },
        bufferPx       : 500,
        debug          : false,
    },
    // call masonry as a callback.
    function( newElements ) {

Answer 2

When the ajax call is made to the next page, inline script tags are stripped out of the request. Hence the why the flash won't work.

The .find method is used within the plugin, implicitly as part of the .load method and callback phase:

jquery: Keep <script> tag after .find()

The best option for you is to isolate the JS code, having looked at the inline JS required for the flash video to work, this seems plausible.