jQuery, Masonry, JWPlayer, Infinite-Scroll 在 PHP 包含文件中追加“<sc

jQuery, Masonry, JWPlayer, Infinite-Scroll Append "<script></script>" Tags within PHP Include File Doesn't Work

本文关键字:追加 sc 包含 JWPlayer Masonry Infinite-Scroll jQuery PHP 文件      更新时间:2023-09-26

首先,我将简要概述我想要完成的工作。

我有一个主要的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 );
});

更新:修复了上面的变量名称...