Team:Dundee/Project/Mop

From 2013.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 21: Line 21:
$(document).ready(function(){
$(document).ready(function(){
-
/*
+
  /*
-
* Instance CirclePlayer inside jQuery doc ready
+
  * Instance CirclePlayer inside jQuery doc ready
-
*
+
  *
-
* CirclePlayer(jPlayerSelector, media, options)
+
  * CirclePlayer(jPlayerSelector, media, options)
-
*  jPlayerSelector: String - The css selector of the jPlayer div.
+
  *  jPlayerSelector: String - The css selector of the jPlayer div.
-
*  media: Object - The media object used in jPlayer("setMedia",media).
+
  *  media: Object - The media object used in jPlayer("setMedia",media).
-
*  options: Object - The jPlayer options.
+
  *  options: Object - The jPlayer options.
-
*
+
  *
-
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
+
  * 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"
+
  * 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.
+
  * 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.
+
  * 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
 +
  });
-
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
 
-
});
 
});
});
//]]>
//]]>
Line 54: Line 75:
       <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">
<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. -->
<!-- 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>
+
      <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. -->
+
      <!-- 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 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-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
-
<div class="cp-buffer-1"></div>
+
          <div class="cp-buffer-1"></div>
-
<div class="cp-buffer-2"></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="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
-
<div class="cp-progress-1"></div>
+
          <div class="cp-progress-1"></div>
-
<div class="cp-progress-2"></div>
+
          <div class="cp-progress-2"></div>
-
</div>
+
        </div>
-
<div class="cp-circle-control"></div>
+
        <div class="cp-circle-control"></div>
-
<ul class="cp-controls">
+
        <ul class="cp-controls">
-
<li><a class="cp-play" tabindex="1">play</a></li>
+
          <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 -->
+
          <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>
+
        </ul>
-
</div>
+
      </div><p><strong> Introduction</strong> </p></center>
-
</div></div>
+
</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>
 +
 +
<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
       <!-- Le javascript

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"