Сначала я дам краткий обзор того, что я пытаюсь сделать.
У меня есть главная страница PHP, которая загружает изображения, текст и видео (которые воспроизводятся с помощью JWPlayer) из базы данных mySQL и использует Masonry для макета. Я также использую Infinite-Scroll, который загружает дополнительный контент, используя следующий код:
$container.masonry( 'appended', $newElems, true );
Дополнительный контент загружается через PHP-страницу с именем loadMore.php.
<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>
На приведенной выше странице lodeMore.php я загружаю больше текста, изображений и видео из базы данных. Если элемент, загруженный из базы данных, является видео, я пытаюсь отобразить его с помощью подключаемого файла php с именем «videoPlayer.php». Код для этого включаемого файла PHP выглядит следующим образом:
<?PHP
echo"<div id='$i'>Loading the video player ...</div>
<script type='text/javascript'>
jwplayer('$i').setup({
flashplayer: 'player.swf',
image: '$imagePath',
skin: 'images/slim.zip',
width: 250,
height: 141,
plugins: {
gapro: { accountid: 'UA-30548455-1'}
},
file: '$videoPath'
});
</script>";
?>
Приведенный выше файл отлично подходит для видеоконтента, который отображается при первоначальной загрузке главной страницы, однако, если он загружается через append и loadMore.php страница не отображает приведенный выше javascript для видеоплеера.
Я обнаружил, что вы не можете использовать append для добавления содержимого, содержащего теги <script> </script>, потому что тег </script> приводит к остановке или закрытию добавления. Я пробовал различные решения, с которыми я столкнулся здесь, включая закрытие тега скрипта с помощью <\/script>, однако даже это, похоже, не работает.
Если кто-нибудь может дать некоторое представление или возможный способ, которым я могу использовать append, чтобы заставить теги <script></script> работать с видеоплеером, это было бы здорово!
Привет, jwatts, вот мой код, включая код, который вы рекомендовали мне:
$(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', columnWidth: 295, isAnimated: !Modernizr.csstransitions, isFitWidth: true }); }); $container.infinitescroll({ navSelector : '#page-nav', // selector for the paged navigation nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) itemSelector : '.box', // selector for all items you'll retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://i.imgur.com/6RMhx.gif' } }, // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); alert("test"); //Find Image and Video Paths from Div tags $($newElems).find("div.content-container").each( function() { var imgpath = $(this).find("div.content-imgpath").text(); var vidpath = $(this).find("div.content-vidpath").text(); var id = $(this).find("div.content-id").attr("id"); loadPlayer( id, imgPath, vidPath ); }); alert("test 2"); //Hide Paths /* div.content-imgpath, div.content-vidpath { display: none; } */ }); } );});
После того, как я вызвал masonry, я добавил рекомендованный вами код, но, похоже, возникли некоторые проблемы, поскольку первое предупреждение test работает, а второе test 2 не работает. вроде работает. Также я рекомендовал код, чтобы скрыть путь к изображению и видео, потому что по какой-то причине он, кажется, предотвращает загрузку дополнительного контента через loadMore.php.
Любые идеи, что я пропустил? Я также добавил функцию javascript loadPlayer для проигрывателя JWVideo в верхней части главной страницы.
