0

我通过替换将动态生成的链接附加到由simpletube jquery 插件生成的缩略图：

for (var i=0; i<intResultsLength; i++) {
if (options['displaytype'] === 'user') {
_objThumbsHolder.append('<div><img src="' + entries[i].thumbnail.sqDefault + '" class="' + entries[i].id + '" /><br /><span class="thumbdescription">'+entries[i].title+'</span></div>');
if (options['defaultvideo'] === entries[i].id) {
intDefault = i;
}

和：

for (var i=0; i<intResultsLength; i++) {
if (options['displaytype'] === 'user') {
_objThumbsHolder.append('<div id="my_id_name"><a class="youtube" href="http://www.youtube.com/embed/' + entries[i].id + '?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent"><img src="' + entries[i].thumbnail.hqDefault + '" class="' + entries[i].id + '" /></a><br /><span class="thumbdescription">'+entries[i].title+'</span></div>');
if (options['defaultvideo'] === entries[i].id) {
intDefault = i;
}

在 jquery.simpletube.js 的第 64 行。我通过获取+ entries[i].id +用于将类应用于缩略图的变量（并且是视频 ID）并再次将其用于链接来实现这一点。

我还做了以下调整

  • 命名包裹缩略图的 div（用于样式）
  • 在缩略图周围包裹了一个 href 链接（所以它变成了一个链接）
  • 向 href 链接添加了一些代码，使其具有与网站上在颜色框中弹出的其他链接相同的属性。（以便它在弹出窗口中打开）
  • 删除了实际的视频播放器实例（因为视频正在弹出颜色框中播放，所以不需要这样做）。

所以一切正常，除了我在单击链接时在颜色框中收到此错误：

“此内容加载失败。”

我检查了萤火虫中的元素，链接代码之间的唯一区别是缩略图链接有一个“youtube”类，而其他链接自动将“cboxElement”附加到它们的类，使它们的类“youtube” cbox元素'。当我手动将缩略图链接类更改为“youtube cboxElement”时，这是颜色框弹出但随后显示“加载失败”消息的时候。

我已经三重检查了我的链接是否准确，并且缩略图链接和其他站点链接的链接代码是否相同。

所以我唯一的想法是......实际上我没有任何想法 - 我想也许 simpletube 正在删除链接的默认操作，但事实并非如此，因为颜色框正在弹出，它只是未能加载内容。

firebug 错误控制台不显示任何错误或警告。

谢谢你。

ps我正在使用的彩盒调用是：

$(".youtube").colorbox({iframe:true, width:"800px"});

更新

仍在研究此问题，我想知道它是否与 colorbox 未绑定到已动态生成的元素有关。

在这方面，我遇到了：

将 jQuery colorbox 插件添加到动态创建的元素

并在我的文档的结束正文标记之前添加了这个（它在头部区域不起作用）：

<script>
$(document).ready(function(){
$( '.new_youtube' ).live('click',function(e){
e.preventDefault();
$.colorbox({open:true});
});
});
</script>

所以链接现在在萤火虫中看起来像这样：

<a class="new_youtube" href="http://www.youtube.com/embed/xx-xxxxxxxx?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent">

colorbox 启动，但随后卡在加载动画 gif 上。

4

1 回答 1

0

我将此添加到头部现有颜色框代码块的底部：

$( '.new_youtube' ).live('click',function(e){
e.preventDefault();
$(this).colorbox({open:true, iframe:true, width:"800px", height: "493px", onClosed:function(){
$(".new_youtube").removeClass('cboxElement');
}
});
});

注意：我必须取消绑定事件，否则再次单击缩略图时，视频播放器的两个实例在弹出的颜色框中。（感谢这个线程如何做到这一点）。

并且 simpletube 链接构造器最终成为：

<div id="my_id_name"><a class="new_youtube" href="http://www.youtube.com/embed/' + entries[i].id + '?rel=0&autohide=1&showinfo=0&autoplay=0&iv_load_policy=3&wmode=transparent"><img src="' + entries[i].thumbnail.hqDefault + '" class="' + entries[i].id + '" /></a><br /><span class="thumbdescription">'+entries[i].title+'</span></div>
于 2012-11-01T13:31:30.163 回答