Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{:Team:Dundee/Templates/Navigationbar}}
<html>
<html>
Line 5: Line 6:
<!-- Website Design By: www.happyworm.com -->
<!-- Website Design By: www.happyworm.com -->
-
<title>Demo : jPlayer circle player</title>
+
<title>Antidote by Brian Cox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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">
+
<link href="http://www.kyleharrison.co.uk/igem/digiposter/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/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://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.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">
<script type="text/javascript">
//<![CDATA[
//<![CDATA[
-
 
$(document).ready(function(){
$(document).ready(function(){
-
/*
+
$("#jquery_jplayer_1").jPlayer({
-
* Instance CirclePlayer inside jQuery doc ready
+
ready: function (event) {
-
*
+
$(this).jPlayer("setMedia", {
-
* CirclePlayer(jPlayerSelector, media, options)
+
wav:"http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav",
-
*  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/audio/igemtayfm.wav",
+
-
}, {
+
-
cssSelectorAncestor: "#cp_container_1",
+
swfPath: "js",
swfPath: "js",
 +
supplied: "wav",
wmode: "window",
wmode: "window",
 +
smoothPlayBar: true,
keyEnabled: true
keyEnabled: true
});
});
Line 50: Line 33:
<body>
<body>
 +
      <!-- Begin page content -->
 +
      <div class="container">
 +
      <!-- Title -->
 +
      <div class="page-header">
 +
          <h2><b>ToxiMop</b> – An Introduction by Brian Cox</h2>
 +
        </div>
 +
      <!-- Title End -->
 +
<div class="row">
 +
    <div class="span12" style="text-align:justify;margin-top:-40px;">
 +
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
-
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
+
<div id="jp_container_1" class="jp-audio">
-
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
+
<div class="jp-type-single">
 +
<div class="jp-gui jp-interface">
 +
<ul class="jp-controls">
 +
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
 +
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
 +
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
 +
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
 +
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
 +
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
 +
</ul>
 +
<div class="jp-progress">
 +
<div class="jp-seek-bar">
 +
<div class="jp-play-bar"></div>
 +
</div>
 +
</div>
 +
<div class="jp-volume-bar">
 +
<div class="jp-volume-bar-value"></div>
 +
</div>
 +
<div class="jp-time-holder">
 +
<div class="jp-current-time"></div>
 +
<div class="jp-duration"></div>
-
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
+
<ul class="jp-toggles">
-
 
+
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
-
<div id="cp_container_1" class="cp-container">
+
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
-
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
+
</ul>
-
<div class="cp-buffer-1"></div>
+
</div>
-
<div class="cp-buffer-2"></div>
+
</div>
</div>
-
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
+
<div class="jp-title">
-
<div class="cp-progress-1"></div>
+
<ul>
-
<div class="cp-progress-2"></div>
+
<li>An Introduction to ToxiMop by Brian Cox</li>
 +
</ul>
 +
</div>
 +
<div class="jp-no-solution">
 +
<span>Update Required</span>
 +
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</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>
</div>
 +
</div>
 +
</div></div>
-
 
+
</div>
-
 
+
-
 
+
-
 
+
-
 
+
</body>
</body>
</html>
</html>

Revision as of 19:53, 4 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

Antidote by Brian Cox

ToxiMop – An Introduction by Brian Cox

Retrieved from "http://2013.igem.org/Team:Dundee/Project/Mop"