JavaScript的視頻縮略圖預覽

我發現了一個非常有用的視頻預覽： http://www.cjboco.com/demo.cfm/project/cj-image-video-previewer/1.1.1/JavaScript的視頻縮略圖預覽

我按照指示，我想出了一個簡單的htm網頁。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="js/jquery.cj_image_video_previewer.js"></script> 
</head> 
<body> 
<div id="Videos" class="clearfix"> 
<div id="preview_01" class="thumbnail"> 
<img src="img/1.jpg" alt="Betty Boop" width="160" height="110" /> 
</div> 
</div> 
<script> 
$(".Videos #preview_01").cjImageVideoPreviewer({ 
     "images": [ 
     'img/2.jpg', 
     'img/3.jpg', 
     'img/4.jpg' 
     ] 
}); 
</script> 
</body> 
</html>

我100％確定路徑是正確的。但是當我把鼠標懸停在圖像上時，什麼都沒有發生。我錯過了什麼嗎？

來源

2017-04-17 simona

你的瀏覽器控制檯有任何錯誤嗎？ –

我當時是與其他代碼相關的，現在我儘可能簡化所有的代碼。只是讓這個工作，所以現在我沒有任何錯誤。 – simona

這是一個有點棘手的工作，我的建議是按照指示，並從這裏發現了GitHub庫提供的代碼：https://github.com/cjboco/cj-image-video-previewer

而且要記住，正確的jQuery庫和CJ圖片視頻預覽庫。在你提供的代碼中，我沒有看到JQuery庫的源代碼，這可能是問題的一部分。

然後如果從在GitHub上提供的例子去，並儘量減少代碼，這是一個簡單的例子，工作：

<!doctype html> 
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]--> 
<!--[if IE 7 ]><html lang="en" class="no-js ie7"><![endif]--> 
<!--[if IE 8 ]><html lang="en" class="no-js ie8"><![endif]--> 
<!--[if IE 9 ]><html lang="en" class="no-js ie9"><![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> 
<html lang="en" class="no-js"> 
<!--<![endif]--> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<style type="text/css"> 
    .Videos { 
     display: block; 
     height: auto; 
     width: 100%; 
    } 
    .Videos div.thumbnail { 
     border: 1px solid #999; 
     display: block; 
     float: left; 
     height: 110px; 
     margin: 0px 10px 10px 0px; 
     overflow: hidden; 
     position: relative; 
     width: 160px; 
    } 
    .Videos div.thumbnailBig { 
     border: 1px solid #999; 
     display: block; 
     float: left; 
     height: 240px; 
     margin: 0px 10px 10px 0px; 
     overflow: hidden; 
     position: relative; 
     width: 320px; 
    } 
</style> 
</head> 
<body> 
    <div class="Videos clearfix"> 
     <div id="preview_01" class="thumbnail"> 
      <img src="https://placehold.it/160x110" alt="test image" width="160" height="110"> 
     </div> 
    </div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="http://www.cjboco.com/projects/cj-image-video-previewer/1.1.1/demo/jquery.cj_image_video_previewer.js"></script> 
<script> 
(function($) { 
    'use strict'; 

    $('#preview_01').cjImageVideoPreviewer({ 
     images: [ 
      'https://placehold.it/160x111', 
      'https://placehold.it/160x112' 
     ] 
    }); 

}(jQuery)); 
</script> 
</body> 
</html>

希望這有助於！

來源

2017-04-18 18:05:37 l33tstealth

非常感謝，是的，我忘了包括jquery，但即使我添加在我的頁面仍然沒有工作。順便說一句，如果我使用你的代碼，它工作正常。儘快我會有空閒時間，我要調查爲什麼我的代碼doesen't工作和你的代碼。再次感謝。 – simona

沒問題，很高興幫助，是的，這是一個非常棘手的問題，讓它工作的開心，它爲你工作。 – l33tstealth

JavaScript的視頻縮略圖預覽

回答

相關問題