Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
{{:Team:Dundee/Templates/Navigationbar}}
 +
 
<html>
<html>
<head>
<head>
Line 5: 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/ScoobyDoo.wav",
+
  * CirclePlayer(jPlayerSelector, media, options)
-
});
+
  *  jPlayerSelector: String - The css selector of the jPlayer div.
-
},
+
  *  media: Object - The media object used in jPlayer("setMedia",media).
-
swfPath: "js",
+
  *  options: Object - The jPlayer options.
-
supplied: "wav",
+
  *
-
wmode: "window",
+
  * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
-
smoothPlayBar: true,
+
  *
-
keyEnabled: true
+
  * 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
 +
  });
 +
 
});
});
//]]>
//]]>
Line 32: Line 72:
<body>
<body>
-
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+
<!-- Begin page content -->
 +
      <div class="container">
 +
 
 +
<div class="row">
 +
<div class="span12">
 +
<h2> An Introductin by Brian Cox </h2><br>
 +
</div></div>
 +
 
 +
<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="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 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 class="span4">
 +
    <center> <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><p><strong> Personal Story</strong> </p></center>
 +
</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 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>
 +
 
 +
 
 +
      <!-- Le javascript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
-
<div id="jp_container_1" class="jp-audio">
+
    <!-- the neccessary javascript -->
-
<div class="jp-type-single">
+
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
-
<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">
 
-
<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>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<div class="jp-title">
 
-
<ul>
 
-
<li>Antidote 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>
 
</body>
</body>
</html>
</html>

Latest revision as of 00:08, 5 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

Demo : jPlayer circle player

An Introductin by Brian Cox


Introduction

Personal Story

What is Synthetic Biology?

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