Tumblr аудио / видео проигрыватели + масонство с бесконечной прокруткой
Вот тестовая страница:http://masonry-test.tumblr.com/
Я использую jquery Masonry с бесконечной прокруткой на Tumblr. Все хорошо, кроме аудио-плееров. Они не загрузятся на вторую страницу и вместо этого отобразят это сообщение [Flash 9 требуется для прослушивания аудио.].
Сделал небольшое исследование и нашел решение. ОдинВот (этот тоже) и здесьJS отСетка тема это делает это успешно (строка 35).
Проблема в том, что я не знаю, где и как реализовать это в своем коде. Все, что я пробовал, либо не работало, либо оставляло небольшой зазор вокруг блоков каменной кладки. Мой код:
<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>