0

画像をクリックしてポップアップするとオーディオも再生されるように、オーディオをファンシーボックスに含めようとしています。ただし、外部オーディオプレーヤーをダウンロードするのではなく、現在Webページに含まれているオーディオプレーヤーを使用します。基本的には、別のMP3をロードして、現在再生中のオーディオを変更したいだけです。

Webページにあるオーディオプレーヤーのコードは次のとおりです。

<div id="audioPlayerContainer" title="Audio Player">

<object type="application/x-shockwave-flash" data="../flash/player_mp3_maxi.swf" width="140" height="20">
<param name="wmode" value="transparent">
<param name="movie" value="../flash/player_mp3_maxi.swf">
<param name="FlashVars" value="configxml=../flash/config.xml&amp;mp3=../audio/intro/intro_08_background_07.mp3">
<p>Flash Audio Player</p>
</object>

</div>

次のリンクをクリックすると再生されるオーディオを変更するにはどうすればよいですか？

     <li style="float:left"><a href="../images/intro_characters_Raj.png" title="Raj Sharma" width="500"><img alt="Raj Sharma" src="../images/intro_characters_Raj.png" /></a></li>

このリンクには、以下に示すfancyboxスクリプトが添付されています。

<script type="text/javascript">

    $(document).ready(function(){

        $("#clientPic li a").fancybox();
    }); 
</script>
4

1 に答える 1

0

コード スニペットに基づく実際の例を次に示します。これがニーズに合っているかどうかを確認してください。

HTML :

<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />

<ul style="text-align: center; margin-top: 20px;">
    <li><a class="fancybox" href="#inline1" title="Now Playing: Sample 1">Launch Sample 1</a></li>
    <li><a class="fancybox" href="#inline2" title="Now Playing: Sample 2">Launch Sample 2</a></li>
    <li><a class="fancybox" href="#inline3" title="Now Playing: Sample 3">Launch Sample 3</a></li>
</ul>

<div id="inline1" style="width: auto; display: none;" >
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
    <param name="quality" value="best" />
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    <p>Sample 1</p>
    </object>
</div>

<div id="inline2" style="width: auto; display: none;" >
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
    <param name="quality" value="best" />
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>
    <p>Sample 2</p>
</div>

<div id="inline3" style="width: auto; display: none;" >
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
    <param name="quality" value="best" />
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    <p>Sample 3</p>
    </object>
</div>

JS :

$(document).ready(function() {
    $('.fancybox').fancybox();
});

したがって、基本的に 3 つの非表示の div があり、それぞれに対応するプレーヤーと .mp3 があります。対応する div が fancybox 内にロードされます (href の値を参照してください)。</p>

このリンクもチェックして、動作中のコードを確認してください: http://jsfiddle.net/hNLdk/頑張ってください。

于 2012-06-18T16:30:47.990 に答える