视频的JQuery弹出模型
我是JQuery的新手，正在尝试在缩略图中显示YouTube播放列表，如果用户单击缩略图，视频将在模式弹出窗口中播放。我发现了一些基于播放列表ID检索youtube播放列表的代码，它工作得很好：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vidz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/8F9409C187634853?v=2&alt=json&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function (data) {
var list_data = "";
$.each(data.feed.entry, function (i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
list_data += '<li><a href="' + url + '" title="' + feedTitle + '"><img alt="' + feedTitle + '" src="' + thumb + '"></a></li>';
});
$(list_data).appendTo(".cont");
});
});//]]>
</script>
</head>
<body>
<ul class="cont"></ul>
</body>
</html>我已经找到了无数的JQuery弹出示例，但问题是它们都使用与本例不同的JQuery版本，因此它们相互抵消，模式弹出不起作用。
谁能告诉我如何用用户点击的视频制作一个模式弹出窗口？
更新:终于找到了解决JQuery冲突问题的方法。似乎在任何其他jquery脚本之前，都需要先加载jquery.min.js。这解决了大多数问题，但出现了新的问题；链接按需显示，但当我单击它们时，什么也没有发生。我决定使用IE9中的F12功能，并查看generated....all看起来不错的超文本标记语言，但这里是它获得weird.....if的地方，我在页面上查看源代码，我得到的代码与上面的相同。如果我使用F12并查看它，我会看到所有的html标签。当我将F12的内容保存到一个新文件中并在IE中打开它时，它工作了！那么，有什么不同呢？IE没有写出所需的html吗？现在完全迷失了……
更新#2:这是我的最新代码，其中包含jquery模式弹出窗口：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vidz</title>
</head>
<body>
<a title="01212012 Country Ham House rally" class="youtube" href="#" rel="vLZ5pIfrhNI">ham</a><br />
<div class="cont"></div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/8F9409C187634853?v=2&alt=json&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function (data) {
var list_data = "";
$.each(data.feed.entry, function (i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
//list_data += '<li><a href="' + url + '" title="' + feedTitle + '" rel="' + videoID + '"><img alt="' + feedTitle + '" src="' + thumb + '"</a></li>';
list_data += '<a class="youtube" href="#" rel="' + videoID + '" title="' + feedTitle + '"><img alt="' + feedTitle + '" src="' + thumb + '"></a><br>';
});
$(list_data).appendTo(".cont");
});
});//]]>
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://wo.simcare.biz/jquery.youtubepopup.js"></script>
<script type="text/javascript">
$(function () { $("a.youtube").YouTubePopup({ autoplay: 0 }); });
</script>正如你在静态链接"ham“中所看到的，vid在弹出窗口中显示得很好。但所有带有缩略图的视频(由jquery函数创建)都不起作用。
想法？
回答 1
Stack Overflow用户
发布于 2012-01-22 11:54:41
调试工具实时读取浏览器上的内容。源代码是代码在访问浏览器之前的代码。JavaScript在浏览器中操作您的内容，而不是源代码。
此外，您的链接在IE9 http://jsfiddle.net/MattLo/guMQa/2/中似乎运行良好
https://stackoverflow.com/questions/8958189
复制相似问题
腾讯云开发者
