Team:Dundee/Digi-Poster

From 2013.igem.org

(Difference between revisions)
 
(10 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Dundee/Templates/DigiNavigationbar}}
+
{{:Team:Dundee/Templates/Navigationbar}}
<html>
<html>
<html lang="en">
<html lang="en">
-
<head>
+
    
-
<meta charset=utf-8 />
+
-
 
+
-
<!-- Website Design By: www.happyworm.com -->
+
-
<title>Demo : jPlayer as a text based audio player</title>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
-
 
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+
-
<script type="text/javascript" src="http://kyleharrison.co.uk/igem/js/jquery.jplayer.min.js"></script>
+
-
<script type="text/javascript">
+
-
//<![CDATA[
+
-
 
+
-
$(document).ready(function(){
+
-
 
+
-
   // Local copy of jQuery selectors, for performance.
+
-
  var my_jPlayer = $("#jquery_jplayer"),
+
-
    my_trackName = $("#jp_container .track-name"),
+
-
    my_playState = $("#jp_container .play-state"),
+
-
    my_extraPlayInfo = $("#jp_container .extra-play-info");
+
-
 
+
-
  // Some options
+
-
  var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
+
-
    opt_auto_play = true, // If true, when a track is selected, it will auto-play.
+
-
    opt_text_playing = "Now playing", // Text when playing
+
-
    opt_text_selected = "Track selected"; // Text when not playing
+
-
 
+
-
  // A flag to capture the first track
+
-
  var first_track = true;
+
-
 
+
-
  // Change the time format
+
-
  $.jPlayer.timeFormat.padMin = false;
+
-
  $.jPlayer.timeFormat.padSec = false;
+
-
  $.jPlayer.timeFormat.sepMin = " min ";
+
-
  $.jPlayer.timeFormat.sepSec = " sec";
+
-
 
+
-
  // Initialize the play state text
+
-
  my_playState.text(opt_text_selected);
+
-
 
+
-
  // Instance jPlayer
+
-
  my_jPlayer.jPlayer({
+
-
    ready: function () {
+
-
      $("#jp_container .track-default").click();
+
-
    },
+
-
    timeupdate: function(event) {
+
-
      my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
+
-
    },
+
-
    play: function(event) {
+
-
      my_playState.text(opt_text_playing);
+
-
    },
+
-
    pause: function(event) {
+
-
      my_playState.text(opt_text_selected);
+
-
    },
+
-
    ended: function(event) {
+
-
      my_playState.text(opt_text_selected);
+
-
    },
+
-
    swfPath: "js",
+
-
    cssSelectorAncestor: "#jp_container",
+
-
    supplied: "mp3",
+
-
    wmode: "window"
+
-
  });
+
-
 
+
-
  // Create click handlers for the different tracks
+
-
  $("#jp_container .track").click(function(e) {
+
-
    my_trackName.text($(this).text());
+
-
    my_jPlayer.jPlayer("setMedia", {
+
-
      mp3: $(this).attr("href")
+
-
    });
+
-
    if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
+
-
      my_jPlayer.jPlayer("play");
+
-
    }
+
-
    first_track = false;
+
-
    $(this).blur();
+
-
    return false;
+
-
  });
+
-
 
+
-
});
+
-
//]]>
+
-
</script>
+
-
 
+
-
<style>
+
-
<!--
+
-
 
+
-
.demo-container {
+
-
  border: 1px solid #009BE3;
+
-
  padding:0 20px;
+
-
  font-family: "Myriad Pro Regular","Trebuchet MS";
+
-
}
+
-
 
+
-
.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
+
-
  color: #009BE3;
+
-
}
+
-
 
+
-
.demo-container ul {
+
-
  list-style-type:none;
+
-
  padding:0;
+
-
  margin:1em 0;
+
-
  width:100%;
+
-
  overflow:hidden;
+
-
}
+
-
 
+
-
.demo-container ul span {
+
-
  color: #A0A600;
+
-
}
+
-
 
+
-
.demo-container li {
+
-
  float:left;
+
-
  margin-right:1em;
+
-
}
+
-
 
+
-
.demo-container p span.track-name {
+
-
  color: #CC0090;
+
-
}
+
-
 
+
-
-->
+
-
</style>
+
-
 
+
-
</head>
+
-
 
+
-
<body>
+
-
 
+
-
 
+
<!-- Begin page content -->
<!-- Begin page content -->
<div class="container">
<div class="container">
Line 133: Line 13:
       <!-- Title End -->
       <!-- Title End -->
-
<div class="row">
+
<a href="/Team:Dundee/Digi-Poster/Introduction"><div class="row">
<img height="100px" src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px">
<img height="100px" src="https://static.igem.org/mediawiki/2013/2/2b/PosterBanner.jpg" style="height:150px;width:98%;padding-left:20px">
-
</div>
+
</div></a>
   <div class="row" style="padding-top:20px">
   <div class="row" style="padding-top:20px">
 +
<a href="https://2013.igem.org/Team:Dundee/Digi-Poster/Mop">
       <div class="span6" style="background-color:#c7e547 !important;">
       <div class="span6" style="background-color:#c7e547 !important;">
-
         <a href="https://2013.igem.org/Team:Dundee/Project/Mop">
+
          
-
                       <center> <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c2/MOP-ICO-Dundee.jpg" style="height:300px;width:300px;"/>        </center></a>
+
                       <center> <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c2/MOP-ICO-Dundee.jpg" style="height:300px;width:300px;"/>        </center>
-
      </div>
+
      </div></a>
 +
<a href="https://2013.igem.org/Team:Dundee/Digi-Poster/Detector">
       <div class="span6" style="background-color:#8067dc !important;">
       <div class="span6" style="background-color:#8067dc !important;">
-
         <a href="https://2013.igem.org/Team:Dundee/Project/Detector">
+
          
-
             <center>        <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c3/DETECTOR-ICO-Dundee.jpg" style="height:300px;width:300px;"/></a>        </center>
+
             <center>        <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c3/DETECTOR-ICO-Dundee.jpg" style="height:300px;width:300px;"/>     </center>
-
         </div>
+
         </div></a> 
</div>
</div>
<div class="row" style="padding-top:20px">
<div class="row" style="padding-top:20px">
-
<a href="https://2013.igem.org/Team:Dundee/Project/Moptopus">
+
<a href="https://2013.igem.org/Team:Dundee/Digi-Poster/Moptopus">
       <div class="span6" style="background-color:#079bc3!important;">
       <div class="span6" style="background-color:#079bc3!important;">
         <center>
         <center>
Line 160: Line 42:
       <div class="span6" style="background-color:#eb3c8b!important;">
       <div class="span6" style="background-color:#eb3c8b!important;">
-
         <a href="https://2013.igem.org/Team:Dundee/Project/HumanPractice">
+
         <a href="https://2013.igem.org/Team:Dundee/Digi-Poster/HumanPractice">
         <center>
         <center>
               <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/ca/HMP-ICO-Dundee.jpg" style="height:300px;width:300px;"/></a>        </center>
               <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/ca/HMP-ICO-Dundee.jpg" style="height:300px;width:300px;"/></a>        </center>
         </div>
         </div>
</div>
</div>
 +
 +
<div class="row" style="padding-top:20px">
 +
<div class="span12"><Center><p style="font-size:22px"> Select an image to load audio content</p></centeR></div>
</div>
</div>
 +
</div>
-
<div id="jquery_jplayer"></div>
+
      <!-- Le javascript
-
 
+
     ================================================== -->
-
    <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->
+
    <!-- Placed at the end of the document so the pages load faster -->
-
 
+
-
     <div id="jp_container" class="demo-container">
+
-
      <ul>
+
-
        <li><span>Select a track : </span></li>
+
-
        <li><a href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="track track-default">Cro Magnon Man</a></li>
+
-
        <li> | </li>
+
-
        <li><a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track">The Separation</a></li>
+
-
        <li> | </li>
+
-
        <li><a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">Lismore</a></li>
+
-
        <li> | </li>
+
-
        <li><a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track">Thin Ice</a></li>
+
-
      </ul>
+
-
      <p>
+
-
        <span class="play-state"></span> :
+
-
        <span class="track-name">nothing</span>
+
-
        at <span class="extra-play-info"></span>
+
-
        of <span class="jp-duration"></span>, which is
+
-
        <span class="jp-current-time"></span>
+
-
      </p>
+
-
      <ul>
+
-
        <li><a class="jp-play" href="#">Play</a></li>
+
-
        <li><a class="jp-pause" href="#">Pause</a></li>
+
-
        <li><a class="jp-stop" href="#">Stop</a></li>
+
-
      </ul>
+
-
      <ul>
+
-
        <li>volume :</li>
+
-
        <li><a class="jp-mute" href="#">Mute</a></li>
+
-
        <li><a class="jp-unmute" href="#">Unmute</a></li>
+
-
        <li> <a class="jp-volume-bar" href="#">|&lt;----------&gt;|</a></li>
+
-
        <li><a class="jp-volume-max" href="#">Max</a></li>
+
-
      </ul>
+
-
    </div>
+
 +
    <!-- the neccessary javascript -->
 +
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
       </div><!-- End Page Content -->
       </div><!-- End Page Content -->

Latest revision as of 00:34, 5 October 2013

iGEM Dundee 2013 · ToxiMop

Retrieved from "http://2013.igem.org/Team:Dundee/Digi-Poster"