0

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

我有一个 PHP 主页面，它从 mySQL 数据库加载图像、文本和视频（使用 JWPlayer 播放），并使用 Masonry 进行布局。我也在使用 Infinite-Scroll，它使用以下代码加载其他内容：

$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>";
?>

上面的文件适用于初始加载主页时显示的视频内容，但是，如果它是通过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 之后，我添加了你推荐的代码，但它似乎有一些麻烦，因为测试的第一个警报有效，但第二个测试 2似乎没有工作。我还推荐了隐藏图像和视频路径的代码，因为由于某种原因，它似乎阻止了通过 loadMore.php 加载其他内容。

有什么我错过的想法吗？我还在主页顶部为 JWVideo 播放器添加了loadPlayer javascript 函数。

4

1 回答 1

0

也许在加载 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 );
});

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

于 2012-05-16T22:30:27.307 回答