Question

我已将动态生成的链接附加到simpletube jquery plugin生成的缩略图，替换为：

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链接中添加了一些代码，使其具有与在colorbox中弹出的网站上的其他链接相同的属性。（这样它会在弹出窗口中打开）
删除了实际的视频播放器实例（因为视频正在弹出的彩盒中播放，因此不需要）。

所以一切正常，除非我在点击链接时在彩盒中收到此错误：

'此内容无法加载。'

我已经检查过firebug中的元素，链接代码之间的唯一区别是缩略图链接有一个'youtube'类，而其他链接自动将'cboxElement'附加到他们的类，使他们的class'youtube cboxElement'。当我手动将缩略图链接类更改为“youtube cboxElement”时，这是当彩色框弹出但随后显示“无法加载”消息时。

我已经三次检查我的链接是否准确，缩略图链接的链接代码和其他网站链接是否相同。

所以我唯一的想法是......实际上我没有任何东西 - 我想也许simpletube正在删除链接的默认动作，但情况并非如此，因为colorbox正在弹出，它是只是没有加载内容。

firebug错误控制台显示没有错误或警告。

谢谢你。

ps我正在使用的彩盒电话是：

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

更新

仍在努力，我想知道它是否与colorbox没有绑定到动态生成的元素有关。

就这样，我遇到了：

Add jQuery colorbox plugin to a dynamically created element

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

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

所以链接现在在firebug中看起来像这样：

<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上。

Answer 1

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

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

注意：我必须取消绑定事件，否则再次点击缩略图时，会弹出两个视频播放器实例。（感谢this thread如何做到这一点）。

并且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>

colorbox内容未从simpletube jquery插件生成的修改后的播放列表输出中加载

1 个答案: