Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
Line 6: Line 6:
<!-- Website Design By: www.happyworm.com -->
<!-- Website Design By: www.happyworm.com -->
-
<title>Antidote by Brian Cox</title>
+
<title>Demo : jPlayer circle player</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 href="http://www.kyleharrison.co.uk/igem/digiposter/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
+
<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://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({
+
/*
-
ready: function (event) {
+
* Instance CirclePlayer inside jQuery doc ready
-
$(this).jPlayer("setMedia", {
+
*
-
wav:"http://www.kyleharrison.co.uk/igem/digiposter/Introduction.wav",
+
* 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/audio/igemtayfm.wav",
 +
}, {
 +
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
swfPath: "js",
-
supplied: "wav",
 
wmode: "window",
wmode: "window",
-
smoothPlayBar: true,
 
keyEnabled: true
keyEnabled: true
});
});
Line 33: Line 51:
<body>
<body>
-
      <!-- Begin page content -->
+
<!-- Begin page content -->
       <div class="container">
       <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="row">
-
    <div class="span12" style="text-align:justify;margin-top:-40px;">
+
<div class="span12">
-
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+
-
<div id="jp_container_1" class="jp-audio">
+
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
-
<div class="jp-type-single">
+
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
-
<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>
+
-
<ul class="jp-toggles">
+
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
+
 
-
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
+
<div id="cp_container_1" class="cp-container">
-
</ul>
+
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
-
</div>
+
<div class="cp-buffer-1"></div>
 +
<div class="cp-buffer-2"></div>
</div>
</div>
-
<div class="jp-title">
+
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
-
<ul>
+
<div class="cp-progress-1"></div>
-
<li>An Introduction to ToxiMop by Brian Cox</li>
+
<div class="cp-progress-2"></div>
-
</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></div>
</div>
</div>
 +
 +
      <!-- Le javascript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
 +
    <!-- the neccessary javascript -->
 +
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 +
 +
</body>
</body>
</html>
</html>

Revision as of 23:48, 4 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

Demo : jPlayer circle player

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