Team:Dundee/Digi-Poster

From 2013.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
{{:Team:Dundee/Templates/Navigationbar}}
 +
 
<html>
<html>
-
<head>
+
<html lang="en">
-
<meta charset=utf-8 />
+
 
 +
<!-- 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 -->
 +
 
 +
<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">
 +
</div></a>
 +
 
 +
 
 +
  <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;">
 +
       
 +
                      <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></a>
-
<!-- Website Design By: www.happyworm.com -->
+
<a href="https://2013.igem.org/Team:Dundee/Digi-Poster/Detector">
-
<title>Demo : jPlayer circle player</title>
+
      <div class="span6" style="background-color:#8067dc !important;">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
       
-
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
+
            <center>        <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/c3/DETECTOR-ICO-Dundee.jpg" style="height:300px;width:300px;"/>     </center>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+
        </div></a>  
-
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
+
</div>
-
<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">
+
<div class="row" style="padding-top:20px">
-
//<![CDATA[
+
-
$(document).ready(function(){
+
<a href="https://2013.igem.org/Team:Dundee/Digi-Poster/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;">
-
* Instance CirclePlayer inside jQuery doc ready
+
        <a href="https://2013.igem.org/Team:Dundee/Digi-Poster/HumanPractice">
-
*
+
        <center>
-
* CirclePlayer(jPlayerSelector, media, options)
+
              <img id="image-6" src="https://static.igem.org/mediawiki/2013/c/ca/HMP-ICO-Dundee.jpg" style="height:300px;width:300px;"/></a>        </center>
-
*  jPlayerSelector: String - The css selector of the jPlayer div.
+
        </div>
-
*  media: Object - The media object used in jPlayer("setMedia",media).
+
</div>
-
*  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",
+
<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>
-
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
+
</div>
-
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
+
-
}, {
+
-
cssSelectorAncestor: "#cp_container_1",
+
-
swfPath: "js",
+
-
wmode: "window",
+
-
keyEnabled: true
+
-
});
+
-
});
+
-
//]]>
+
-
</script>
+
-
</head>
+
-
<body>
+
-
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
+
</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. -->
+
      <!-- Le javascript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
-
<div id="cp_container_1" class="cp-container">
+
    <!-- the neccessary javascript -->
-
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
+
    <script src="http://code.jquery.com/jquery-latest.js"></script>
-
<div class="cp-buffer-1"></div>
+
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
-
<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>
+
-
</body>
+
      </div><!-- End Page Content -->
 +
  </body>
</html>
</html>

Latest revision as of 00:34, 5 October 2013

iGEM Dundee 2013 · ToxiMop

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