Team:Dundee/HumanPractice/Comic

From 2013.igem.org

(Difference between revisions)
 
(8 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', 'right', incrementComicCounter());
-
$(document).bind('keyup', 'left' , decrementComicCounter());
+
    $(document).bind('keyup', 'left' , decrementComicCounter());
 +
    document.getElementById("comicpage").style.height="100%";
 +
    document.getElementById("comicpage").style.width="100%";
-
document.getElementById("comicpage").style.height="100%";
+
  });
-
document.getElementById("comicpage").style.width="100%";
+
 
 +
    /* This functions are just examples and used in the callbacks */
 +
   
 +
    function changeBGColor(color) {
 +
      $('body').stop().animate({
 +
        backgroundColor: color
 +
      });
 +
    }
 +
   
 +
    function greenStyle(){
 +
      changeBGColor('#029B86');
 +
      $('#wrapper #text').css('color','#73F4E1');
 +
      $('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
 +
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
 +
    }
 +
   
 +
    function darkStyle(){
 +
      changeBGColor('#111');
 +
      $('#wrapper #text').css('color','#444');
 +
      $('#wrapper strong').css('color','#666');
 +
      $('#wrapper .imgplayer-frame').css('border-color', '#333');
 +
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
-
});
+
    }
-
+
 
-
/* This functions are just examples and used in the callbacks */
+
    function lightgreyStyle(){
-
+
      changeBGColor('#333');
-
function changeBGColor(color) {
+
      $('#wrapper #text').css('color','#666');  
-
$('body').stop().animate({
+
      $('#wrapper .imgplayer-frame').css('border-color', '#555');
-
backgroundColor: color
+
    }
-
});
+
 
-
}
+
 
-
+
  </script>
-
function greenStyle(){
+
-
changeBGColor('#029B86');  
+
-
$('#wrapper #text').css('color','#73F4E1');
+
-
$('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
+
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
+
-
}
+
-
+
-
function darkStyle(){
+
-
changeBGColor('#111');
+
-
$('#wrapper #text').css('color','#444');
+
-
$('#wrapper strong').css('color','#666');
+
-
$('#wrapper .imgplayer-frame').css('border-color', '#333');
+
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
+
-
}
 
-
 
-
function lightgreyStyle(){
 
-
changeBGColor('#333');
 
-
$('#wrapper #text').css('color','#666');
 
-
$('#wrapper .imgplayer-frame').css('border-color', '#555');
 
-
}
 
-
 
-
 
-
</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 94: 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 136: 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>
 +
        <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>
-
<center>
+
      <div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
-
    <button class="btn btn-primary btn-large" style="margin-right:15px;margin-top:10px;" onclick="decrementComicCounter()">Previous Page</button>
+
    </center>
-
<button class ="btn btn-primary btn-large" style="margin-top:10px;" onclick="incrementComicCounter()">Next Page</button>
+
  </div>
-
<div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
+
    <div class="row">
-
</center>
+
    <div class="span12">
-
</div>
+
-
<div class="row">
+
     
-
<div class="span12">
+
  <div class="row">
 +
    <div class="span12">
-
<h2>Download Our Comic Now!</h2>
+
      <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>
+
      <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>
+
  </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"