"
Team:Dundee/Project/Mop
From 2013.igem.org
(Difference between revisions)
Kyleharrison (Talk | contribs) |
Kyleharrison (Talk | contribs) |
||
| Line 21: | Line 21: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| - | + | /* | |
| - | + | * Instance CirclePlayer inside jQuery doc ready | |
| - | + | * | |
| - | + | * CirclePlayer(jPlayerSelector, media, options) | |
| - | + | * jPlayerSelector: String - The css selector of the jPlayer div. | |
| - | + | * media: Object - The media object used in jPlayer("setMedia",media). | |
| - | + | * options: Object - The jPlayer options. | |
| - | + | * | |
| - | + | * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer. | |
| - | + | * | |
| - | + | * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3" | |
| - | + | * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution. | |
| - | + | * However, the OGA format would be used in this case with the HTML solution. | |
| - | + | */ | |
| + | |||
| + | var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1", | ||
| + | { | ||
| + | m4a: "http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav", | ||
| + | }, { | ||
| + | cssSelectorAncestor: "#cp_container_1", | ||
| + | swfPath: "js", | ||
| + | wmode: "window", | ||
| + | keyEnabled: true | ||
| + | }); | ||
| + | |||
| + | var myCirclePlayer2 = new CirclePlayer("#jquery_jplayer_2", | ||
| + | { | ||
| + | m4a: "http://www.kyleharrison.co.uk/igem/digiposter/BrianStory.wav", | ||
| + | }, { | ||
| + | cssSelectorAncestor: "#cp_container_2", | ||
| + | swfPath: "js", | ||
| + | wmode: "window", | ||
| + | keyEnabled: true | ||
| + | }); | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
}); | }); | ||
//]]> | //]]> | ||
| Line 53: | Line 64: | ||
<!-- Begin page content --> | <!-- Begin page content --> | ||
<div class="container"> | <div class="container"> | ||
| - | |||
<div class="row"> | <div class="row"> | ||
<div class="span12"> | <div class="span12"> | ||
| + | <h2> An Introductin by Brian Cox </h2><br> | ||
| + | </div></div> | ||
| + | <div class="row"> | ||
| + | <div class="span12"> | ||
| + | <centeR> | ||
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. --> | <!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. --> | ||
| - | + | <div id="jquery_jplayer_1" class="cp-jplayer"></div> | |
| - | + | <!-- The container for the interface can go where you want to display it. Show and hide it as you need. --> | |
| - | + | <div id="cp_container_1" class="cp-container"> | |
| - | + | <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> | |
| - | + | <div class="cp-buffer-1"></div> | |
| - | + | <div class="cp-buffer-2"></div> | |
| - | + | </div> | |
| - | + | <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> | |
| - | + | <div class="cp-progress-1"></div> | |
| - | + | <div class="cp-progress-2"></div> | |
| - | + | </div> | |
| - | + | <div class="cp-circle-control"></div> | |
| - | + | <ul class="cp-controls"> | |
| - | + | <li><a class="cp-play" tabindex="1">play</a></li> | |
| - | + | <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> | |
| - | + | </ul> | |
| - | + | </div></center> | |
| + | </div></div> | ||
| + | |||
| + | <div id="jquery_jplayer_2" class="cp-jplayer"></div> | ||
| + | |||
| + | <!-- The container for the interface can go where you want to display it. Show and hide it as you need. --> | ||
| + | |||
| + | <div id="cp_container_2" class="cp-container"> | ||
| + | <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> | ||
| + | <div class="cp-buffer-2"></div> | ||
| + | <div class="cp-buffer-2"></div> | ||
| + | </div> | ||
| + | <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> | ||
| + | <div class="cp-progress-2"></div> | ||
| + | <div class="cp-progress-2"></div> | ||
| + | </div> | ||
| + | <div class="cp-circle-control"></div> | ||
| + | <ul class="cp-controls"> | ||
| + | <li><a class="cp-play" tabindex="1">play</a></li> | ||
| + | <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> | ||
| + | </ul> | ||
| + | </div></center> | ||
</div></div> | </div></div> | ||
</div> | </div> | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="span12"> | ||
| + | <center><img src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg"></img</center> | ||
| + | </div></div> | ||
<!-- Le javascript | <!-- Le javascript | ||
Revision as of 00:01, 5 October 2013
