視頻的JQuery彈出模型

我是JQuery的新手，我試圖以縮略圖形式顯示YouTube播放列表，如果用戶單擊縮略圖，視頻將以模式彈出窗口播放。我發現一些代碼，獲取基於播放列表ID YouTube播放列表和它的偉大工程：視頻的JQuery彈出模型

<!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.min.js需要先加載，在任何其他的jQuery腳本之前。這解決了大部分問題，但出現了一個新問題;鏈接根據需要顯示，但當我點擊它們時，沒有任何反應。我決定在IE9中使用F12功能，並查看正在生成的HTML ....所有看起來不錯，但這裏是它變得很奇怪.....如果我查看我的網頁上的源代碼，我得到相同的代碼如上。如果我使用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>

你可以使用靜態鏈接「火腿」看到，VID顯示在彈出窗口就好了。但沒有任何帶縮略圖的視頻（由jquery功能創建）工作。

想法？

來源

2012-01-22 Robert

調試工具實時讀取瀏覽器上的內容。來源是代碼在碰到瀏覽器之前。 JavaScript在瀏覽器中操縱你的內容，而不是來源。

而且你的鏈接似乎在IE9 http://jsfiddle.net/MattLo/guMQa/2/

來源

2012-01-22 03:54:40

耶做工精細，我用小提琴來調試和幫助我，這也極大的....小工具。我的問題是我添加了一些代碼來顯示jquery模式彈出窗口......但是當我點擊vid時，沒有任何反應。它幾乎看起來好像頁面沒有完全呈現HTML或類似的東西....如果我彈出代碼並提供一個靜態鏈接（帶有特定類和url的「a」標籤），它工作正常。當我嘗試在上面的jquery中構建相同的鏈接時，它不起作用。根據F12，鏈接顯示得很好，但它不起作用。令人沮喪..... – Robert

奇怪的是，在我的IE9中，當JavaScript生成鏈接時，您提供的源代碼完美無缺。錨鏈接按預期工作。在另一個瀏覽器中嘗試您的代碼。 –

查看上面修改後的代碼... – Robert

視頻的JQuery彈出模型

回答

相關問題