將函數添加到Shadowbox JS庫

我有一個設置爲顯示圖像的shadowbox圖庫。但是，除了下一個，上一個和關閉按鈕之外，我還想添加一個音頻按鈕，以便播放一個MP3文件，該文件會對每張照片進行一點說明。這可能嗎？這裏是我的圖像的HTML代碼...將函數添加到Shadowbox JS庫

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript" src="Script/jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="Styles/shadowbox.css"> 
<script type="text/javascript" src="Script/shadowbox.js"></script> 
<script type="text/javascript"> 

Shadowbox.init(); 
    window.onload = function() { 
     Shadowbox.open({ 
      content: 'Images/Tech_trends_img/memory_capacity.png', 
      player: "img", 
      title: "Figure.1: Memory Capacity", 
      gallery: "TechTrends", 
     }); 
    }; 
</script> 

</head> 

<body> 

<div id="menu" style="display: none;"> 
    <ul> 
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_capacity.png" title="Figure.2: Processor Capacity"></a></li>  
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_capacity_2.png" title="Figure.3: Processor Capacity"></a></li> 
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_performance.png" title="Figure.4: Processor Performance"></a></li>   
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/post_1990.png" title="Figure.5: Processor Capacity Post 1990"></a></li>  
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_clk_rate.png" title="Figure.6: Processor Clock Rate">\</a></li> 
     <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/physical_limits_moore.png" title="Figure.7: Physical Limits on Moore's Law"></a></li> 
    </ul> 
</div>

來源

2014-01-28 jkossis

使用此添加音頻按鈕。

<!DOCTYPE html> 
<script type="text/javascript"> 
function listen(){ 
var audio = document.getElementById("audio"); 
audio.currentTime = 0; 
audio.play(); 
} 
</script> 

<audio preload="auto" id="audio"> 
    <source src="YOURAUDIOFILE.ogg" type="audio/ogg"> 
    <source src="YOURAUDIOFILE.mp3" type="audio/mpeg"> 
    Your browser does not support the audio tag. 
</audio> 
<input type="button" value="Listen" onclick="listen()">

來源

2014-01-29 02:44:51 user3246890

這與Shadowbox功能有關嗎？在Shadwobox.js本身或源HTML文件中？謝謝您的幫助！ – jkossis

沒問題！無論您想要哪個音頻按鈕，都要將此代碼粘貼在源HTML文件中。確保將音頻文件上傳到與此HTML相同的目錄中，或者將src更改爲更具體的URL（例如：「http://www.mywebpage.com/myaudiofile.mp3/」而不是「myaudiofile.mp3 「）。希望能回答一切。 – user3246890

我明白你的意思，但我真的希望這個音頻按鈕出現在Shadowbox「畫布」中，如果你願意的話。我明白，如果我想在常規html網站上使用這個按鈕，那麼這肯定會成爲一種方式。但我正在尋找其他方式。你熟悉Shadowbox嗎？ – jkossis

將函數添加到Shadowbox JS庫

回答

相關問題