Team:Dundee/Digi-Poster

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Dundee/Templates/DigiNavigationbar}}
+
<!DOCTYPE html>
-
 
+
<html>
<html>
-
<html lang="en">
 
<head>
<head>
<meta charset=utf-8 />
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<!-- Website Design By: www.happyworm.com -->
-
<title>Demo : jPlayer as a text based audio player</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 rel="stylesheet" href="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="js/jquery.jplayer.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
 +
<script type="text/javascript" src="js/jquery.grab.js"></script>
 +
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
 +
<script type="text/javascript" src="js/circle.player.js"></script>
-
<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">
<script type="text/javascript">
//<![CDATA[
//<![CDATA[
Line 17: Line 20:
$(document).ready(function(){
$(document).ready(function(){
-
  // Local copy of jQuery selectors, for performance.
+
/*
-
  var my_jPlayer = $("#jquery_jplayer"),
+
* Instance CirclePlayer inside jQuery doc ready
-
    my_trackName = $("#jp_container .track-name"),
+
*
-
    my_playState = $("#jp_container .play-state"),
+
* CirclePlayer(jPlayerSelector, media, options)
-
    my_extraPlayInfo = $("#jp_container .extra-play-info");
+
*   jPlayerSelector: String - The css selector of the jPlayer div.
-
 
+
*  media: Object - The media object used in jPlayer("setMedia",media).
-
   // Some options
+
*   options: Object - The jPlayer 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.
+
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
-
    opt_text_playing = "Now playing", // Text when playing
+
*
-
    opt_text_selected = "Track selected"; // Text when not playing
+
* 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.
-
  // A flag to capture the first track
+
* However, the OGA format would be used in this case with the HTML solution.
-
  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;
+
-
  });
+
 +
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
 +
{
 +
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
 +
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
 +
}, {
 +
cssSelectorAncestor: "#cp_container_1",
 +
swfPath: "js",
 +
wmode: "window",
 +
keyEnabled: true
 +
});
});
});
//]]>
//]]>
</script>
</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>
</head>
 +
<body>
-
<body>
+
<!-- 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>
-
 
+
-
<!-- Begin page content -->
+
-
<div class="container">
+
-
 
+
-
      <!-- Title -->
+
-
      <div class="page-header" style="margin: -40px 0px 0px;">
+
-
          <h2><b>Welcome to </b> Digi-Poster</h2>
+
-
        </div>
+
-
      <!-- Title End -->
+
-
 
+
-
<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">
+
-
</div>
+
-
 
+
-
 
+
-
  <div class="row" style="padding-top:20px">
+
-
 
+
-
      <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>
+
-
      </div>
+
-
 
+
-
      <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>
+
-
        </div>
+
-
</div>
+
-
 
+
-
<div class="row" style="padding-top:20px">
+
-
 
+
-
<a href="https://2013.igem.org/Team:Dundee/Project/Moptopus">
+
-
      <div class="span6" style="background-color:#079bc3!important;">
+
-
        <center>
+
-
                <img id="image-6" src="https://static.igem.org/mediawiki/2013/9/9f/MOPTOPUS-ICO-Dundee.jpg" style="height:300px;width:300px;"/></center>
+
-
      </div></a>
+
-
 
+
-
      <div class="span6" style="background-color:#eb3c8b!important;">
+
-
        <a href="https://2013.igem.org/Team:Dundee/Project/HumanPractice">
+
-
        <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 class="row">
+
-
  <div id="jquery_jplayer"></div>
+
-
 
+
-
      <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->
+
-
      <div id="jp_container" class="demo-container">
+
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
-
        <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>
+
-
    </div> <!-- End Row -->
+
 +
<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>
-
      </div><!-- End Page Content -->
+
</body>
-
  </body>
 
</html>
</html>

Revision as of 15:55, 14 August 2013

<!DOCTYPE html> Demo : jPlayer circle player

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