将函数添加到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库

回答

相关问题