jQuery, Masonry, JWPlayer, Infinite-Scroll 在 PHP 包含文件中追加“<sc
jQuery, Masonry, JWPlayer, Infinite-Scroll Append "<script></script>" Tags within PHP Include File Doesn't Work
首先,我将简要概述我想要完成的工作。
我有一个主要的PHP页面,它从mySQL数据库加载图像,文本和视频(使用JWPlayer播放(,并使用Masonry进行布局。我还使用无限滚动,它使用以下代码加载其他内容:
$container.masonry( 'appended', $newElems, true );
其他内容通过名为 loadMore 的 PHP 页面加载.php
<nav id="page-nav">
<a href="loadMore.php?n=2"></a>
</nav>
在上面的lodeMore.php页面中,我正在从数据库中加载更多文本,图像和视频。如果从数据库加载的项目是视频,我尝试使用名为">videoPlayer.php"的 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>";
?>
上述文件适用于主页最初加载时显示的视频内容,但是,如果通过追加加载并且 loadMore.php 页面,则不会为视频播放器显示上述 javascript。
我发现您似乎无法使用追加来追加包含<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; } */ }); } );
}(;
在我调用砖石后,我添加了您推荐的代码,但是由于测试的第一个警报有效,它似乎遇到了一些麻烦,但是第二个测试2似乎不起作用。此外,我还推荐了隐藏图像和视频路径的代码,因为出于某种原因,它似乎阻止了通过 loadMore.php 加载额外的 conent。
有什么想法我错过了什么吗?我还在主页顶部为 JWVideo 播放器添加了 loadPlayer javascript 函数。
也许在主页上创建一个加载jwplayer的函数
function loadPlayer(id, imgPath, vidPath) {
jwplayer(id).setup({
flashplayer: 'player.swf',
image: imgPath,
skin: 'images/slim.zip',
width: 250,
height: 141,
plugins: {
gapro: { accountid: 'UA-30548455-1'}
},
file: vidPath
});
}
返回如下的 HTML:
<div class="content-container">
<div class="content-imgpath">path name here</div>
<div class="content-vidpath">vid path here</div>
<div class="content-id" id='$i'>Loading the video player ...</div>
</div>
确保图像路径和视频路径处于隐藏状态:
div.content-imgpath, div.content-vidpath {
display: none;
}
调用masonry
执行此操作后:
$($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 );
});
更新:修复了上面的变量名称...
- 表追加而不附加最后一个元素
- 如何在jquery中停止在更改时追加值
- JQuery.on(“keydown”)追加到页面时不工作
- jQuery[button.class]未检测到用按钮追加行
- 使用jQuery'生成输入字段;s追加
- js”;在“;不按特定顺序追加键/值
- 如何在 ReactJs 中追加到表
- 文本框仅接受十进制值,并且应在十进制后追加2个零
- 为什么DocumentFragment在追加后被清除
- 正在从JQuery追加Laravel Blade
- 有什么方法可以在下一个元素上进行追加吗
- 遍历SC.ManyArrray以创建要附加到SproutCore中的另一个视图的自定义视图
- jQuery-根据值在输入字段后追加图像
- jQuery动态使用.append()添加输入,但发布表单不是追加数据
- 追加Jquery后的Binding Click事件不起作用
- 包含数组的对象的QML ListModel追加中断
- JQuery追加到父级,只要它's已创建
- 一个接一个地追加两次
- 如何仅在数组没有的情况下追加到数组't包含带有rethinkDB的值
- Jasmine-无法将元素追加到DOM