Team:Dundee/HumanPractice/Comic

From 2013.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 5: Line 5:
<head>
<head>
-
<title>iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk</title>
+
  <title>iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk</title>
-
<meta name="description" content="A simple motion comic using a jQuery plugin to slide through details of an image.">
+
  <meta name="description" content="A simple motion comic using a jQuery plugin to slide through details of an image.">
-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
-
+
 
-
<!-- Including jQuery -->
+
  <!-- Including jQuery -->
-
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-
+
 
-
<!-- Optional plugins -->
+
  <!-- Optional plugins -->
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.hotkeys.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.hotkeys.js"></script>
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.easing.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.easing.js"></script>  
-
+
 
-
<!-- Including the main plugin file -->
+
  <!-- Including the main plugin file -->
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/jquery.imgplayer.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/jquery.imgplayer.js"></script>
-
+
 
-
+
 
-
<!-- Config for this demo -->
+
  <!-- Config for this demo -->
-
+
 
-
<script>
+
  <script>
-
+
 
-
$(document).ready(function() {  
+
  $(document).ready(function() {  
-
+
   
-
var windowWidth  = $(window).width,
+
    var windowWidth  = $(window).width,
-
    windowHeight = $(window).height;
+
        windowHeight = $(window).height;
-
+
   
-
$('img#comicpage').imgplayer({
+
    $('img#comicpage').imgplayer({
-
frames: [
+
      frames: [
-
// 10th Frame
+
        // 10th Frame
-
[0,0,1300,1838,{
+
        [0,0,1300,1838,{
-
onStart: function(){  
+
          onStart: function(){  
-
darkStyle();
+
            darkStyle();
-
}
+
          }
-
}]
+
        }]
-
],
+
      ],
-
debug: false,
+
      debug: false,    
-
});
+
    });
-
+
     
-
/* Keyboard Hotkeys */
+
    /* Keyboard Hotkeys */
-
+
   
 +
    $(document).bind('keyup', 'right', incrementComicCounter());
 +
    $(document).bind('keyup', 'left' , decrementComicCounter());
-
document.getElementById("comicpage").style.height="100%";
+
    document.getElementById("comicpage").style.height="100%";
-
document.getElementById("comicpage").style.width="100%";
+
    document.getElementById("comicpage").style.width="100%";
-
});
+
  });
-
+
 
-
/* This functions are just examples and used in the callbacks */
+
    /* This functions are just examples and used in the callbacks */
-
+
   
-
function changeBGColor(color) {
+
    function changeBGColor(color) {
-
$('body').stop().animate({
+
      $('body').stop().animate({
-
backgroundColor: color
+
        backgroundColor: color
-
});
+
      });
-
}
+
    }
-
+
   
-
function greenStyle(){
+
    function greenStyle(){
-
changeBGColor('#029B86');  
+
      changeBGColor('#029B86');  
-
$('#wrapper #text').css('color','#73F4E1');
+
      $('#wrapper #text').css('color','#73F4E1');
-
$('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
+
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
-
}
+
    }
-
+
   
-
function darkStyle(){
+
    function darkStyle(){
-
changeBGColor('#111');
+
      changeBGColor('#111');
-
$('#wrapper #text').css('color','#444');  
+
      $('#wrapper #text').css('color','#444');  
-
$('#wrapper strong').css('color','#666');  
+
      $('#wrapper strong').css('color','#666');  
-
$('#wrapper .imgplayer-frame').css('border-color', '#333');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#333');
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
+
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
-
}
+
    }
-
+
 
-
function lightgreyStyle(){
+
    function lightgreyStyle(){
-
changeBGColor('#333');
+
      changeBGColor('#333');
-
$('#wrapper #text').css('color','#666');  
+
      $('#wrapper #text').css('color','#666');  
-
$('#wrapper .imgplayer-frame').css('border-color', '#555');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#555');
-
}
+
    }
-
+
 
-
+
 
-
</script>
+
  </script>
-
     <link href="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/imgplayer.css" rel="stylesheet" type="text/css" media="screen" />
+
     <link href="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/imgplayer.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
<script type="text/javascript">
Line 91: Line 93:
function incrementComicCounter(){
function incrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter>=comicPages){
+
  if(counter>=comicPages){
-
counter=0;
+
    counter=0;
-
} else {
+
  } else {
-
counter++;
+
    counter++;
-
}
+
  }
-
comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
+
  comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
-
document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
-
document.getElementById("comicpage").style.height="100%";
+
      document.getElementById("comicpage").style.height="100%";
-
document.getElementById("comicpage").style.width="100%";
+
      document.getElementById("comicpage").style.width="100%";
-
}
+
  }
function decrementComicCounter(){
function decrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter<=0){
+
  if(counter<=0){
-
counter=comicPages;
+
    counter=comicPages;
-
} else {
+
  } else {
-
counter--;
+
    counter--;
-
}
+
  }
-
comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
+
  comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
-
document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
-
}
+
  }
</script>
</script>
Line 133: Line 135:
-
<div id="wrapper" style="margin-top:-35px;">
+
  <div id="wrapper" style="margin-top:-35px;">
-
+
     
-
<img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
+
    <img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
-
<center>
+
    <center>
-
    <button class="btn btn-primary btn-large" style="margin-right:15px;margin-top:10px;" onclick="decrementComicCounter()">Previous Page</button>
+
        <button class="btn btn-primary btn-large" style="margin-right:15px;margin-top:10px;" onclick="decrementComicCounter()">Previous Page</button>
-
<button class ="btn btn-primary btn-large" style="margin-top:10px;" onclick="incrementComicCounter()">Next Page</button>
+
      <button class ="btn btn-primary btn-large" style="margin-top:10px;" onclick="incrementComicCounter()">Next Page</button>
-
<div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
+
      <div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
-
</center>
+
    </center>
-
</div>
+
  </div>
-
<div class="row">
+
    <div class="row">
-
<div class="span12">
+
    <div class="span12">
-
<h2>Download Our Comic Now!</h2>
+
     
-
<p> Our comic is available for download, free of charge. <a href="https://static.igem.org/mediawiki/2013/1/13/Dundee_iGEM_2013_Comic.pdf">Download</a> a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.</p>
+
  <div class="row">
-
</div>
+
    <div class="span12">
-
</div>
+
 
 +
      <h2>Download Our Comic Now!</h2>
 +
      <p> Our comic is available for download, free of charge. <a href="https://static.igem.org/mediawiki/2013/1/13/Dundee_iGEM_2013_Comic.pdf">Download</a> a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.</p>
 +
      </div>
 +
  </div>
       <div id="push"></div>
       <div id="push"></div>

Latest revision as of 22:16, 4 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk

University of Dundee 2013 iGEM team presents...

Viewing Page : 1

Download Our Comic Now!

Our comic is available for download, free of charge. Download a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.

a

Retrieved from "http://2013.igem.org/Team:Dundee/HumanPractice/Comic"