Team:Dundee/Project/Mop
From 2013.igem.org
(Difference between revisions)
Kyleharrison (Talk | contribs) |
Kyleharrison (Talk | contribs) |
||
(27 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
- | < | + | <head> |
+ | <meta charset=utf-8 /> | ||
- | + | <!-- Website Design By: www.happyworm.com --> | |
+ | <title>Demo : jPlayer circle player</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | ||
+ | <link rel="stylesheet" href="http://www.kyleharrison.co.uk/igem/digiposter/skin/circle.skin/circle.player.css"> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | ||
+ | <script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.jplayer.min.js"></script> | ||
+ | <script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.transform2d.js"></script> | ||
+ | <script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/jquery.grab.js"></script> | ||
+ | <script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/mod.csstransforms.min.js"></script> | ||
+ | <script type="text/javascript" src="http://www.kyleharrison.co.uk/igem/digiposter/js/circle.player.js"></script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | //<![CDATA[ | ||
+ | |||
+ | $(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 | ||
+ | }); | ||
+ | |||
+ | var myCirclePlayer3 = new CirclePlayer("#jquery_jplayer_3", | ||
+ | { | ||
+ | m4a: "http://www.kyleharrison.co.uk/igem/digiposter/ScoobyDoo.wav", | ||
+ | }, { | ||
+ | cssSelectorAncestor: "#cp_container_3", | ||
+ | swfPath: "js", | ||
+ | wmode: "window", | ||
+ | keyEnabled: true | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | //]]> | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- Begin page content --> | ||
<div class="container"> | <div class="container"> | ||
- | + | <div class="row"> | |
- | + | <div class="span12"> | |
- | + | <h2> An Introductin by Brian Cox </h2><br> | |
- | + | </div></div> | |
- | + | ||
<div class="row"> | <div class="row"> | ||
- | + | <div class="span12"> | |
- | < | + | <center><img src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px"></img</center> |
- | + | </div></div> | |
- | + | ||
- | + | ||
- | < | + | |
- | |||
- | |||
- | |||
- | |||
<div class="row"> | <div class="row"> | ||
- | + | <div class="span4"> | |
- | < | + | <centeR> |
+ | <!-- 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> | + | <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><p><strong> Introduction</strong> </p></center> | ||
</div> | </div> | ||
- | + | <div class="span4"> | |
- | <div class=" | + | <center> <div id="jquery_jplayer_2" class="cp-jplayer"></div> |
- | <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=" | + | <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> |
- | <p> <strong> | + | </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><p><strong> Personal Story</strong> </p></center> | ||
</div> | </div> | ||
+ | <div class="span4"> | ||
+ | <centeR> | ||
+ | <!-- 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_3" 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_3" class="cp-container"> | |
- | + | <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> | |
- | + | <div class="cp-buffer-3"></div> | |
- | </div> | + | <div class="cp-buffer-3"></div> |
- | + | </div> | |
+ | <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> | ||
+ | <div class="cp-progress-3"></div> | ||
+ | <div class="cp-progress-3"></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><p><strong> What is Synthetic Biology?</strong> </p></center> | ||
+ | </div> | ||
+ | </div> | ||
Line 94: | Line 164: | ||
<!-- the neccessary javascript --> | <!-- the neccessary javascript --> | ||
- | |||
<script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script> | <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script> | ||
+ | </body> | ||
- | |||
</html> | </html> |
Latest revision as of 00:08, 5 October 2013