Team:Dundee/HumanPractice/Comic

From 2013.igem.org

(Difference between revisions)
 
(53 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;
-
+
   
-
$('#text').html('<strong>Welcome to this little demo.</strong><br>Please reload if you see no image. Click in the image, use the buttons below or the arrow buttons on your keyboard.');
+
    $('img#comicpage').imgplayer({
-
+
      frames: [
-
$('img#comicpage').imgplayer({
+
        // 10th Frame
-
frames: [
+
        [0,0,1300,1838,{
-
// 1st Frame
+
          onStart: function(){  
-
[25,50,640,630,{
+
            darkStyle();
-
onStart: function(){  
+
          }
-
darkStyle();
+
        }]
-
$('#text').html('<strong>Welcome to this little demo.</strong><br>Please reload if you see no image. Click in the image, use the buttons below or the arrow buttons on your keyboard.');
+
      ],   
-
},
+
      debug: false,   
-
changeEffect: 'static' 
+
    });
-
}],
+
     
-
// 3rd Frame
+
    /* Keyboard Hotkeys */
-
[25,665,640,630,{  
+
   
-
onStart: function(){
+
    $(document).bind('keyup', 'right', incrementComicCounter());
-
darkStyle();
+
    $(document).bind('keyup', 'left' , decrementComicCounter());
-
$('#text').html('To setup an image for this, you have to define four values for every detail area: The <strong>width</strong> and <strong>height</strong> of the area and the position, relative to the <strong>top</strong> and <strong>left</strong> side of the image.');
+
-
}
+
-
}],
+
-
// 5th Frame
+
-
[635,72,1300,615, {
+
-
onStart: function(){
+
-
darkStyle();
+
-
$('#text').html('You can change the style and speed of the animation or switch it completely off. Also, you can write your own awesome animation stuff and plug it in.');
+
-
},
+
-
}],
+
-
// 8th Frame
+
    document.getElementById("comicpage").style.height="100%";
-
[1235,25,1300,600, {
+
    document.getElementById("comicpage").style.width="100%";
-
onStart: function(){
+
-
darkStyle();  
+
-
$('#text').html('You can customize everything via predefined options and own callback functions.');
+
-
}
+
-
}],
+
-
// 10th Frame
+
  });
-
[0,0,1300,1838,{
+
 
-
onStart: function(){  
+
    /* This functions are just examples and used in the callbacks */
-
darkStyle();
+
   
-
$('#text').html('This is the last frame.<br>By skipping forward you\'re looping back to the start.');
+
    function changeBGColor(color) {
-
}
+
      $('body').stop().animate({
-
}]
+
        backgroundColor: color
-
],
+
      });
-
+
    }
-
debug: false,
+
   
 +
    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');
-
});
+
    }
-
+
 
-
/* Keyboard Hotkeys */
+
    function lightgreyStyle(){
-
+
      changeBGColor('#333');
-
$(document).bind('keyup', 'right', function(){ $.imgplayer.gotoNext()  });
+
      $('#wrapper #text').css('color','#666');  
-
$(document).bind('keyup', 'left' , function(){ $.imgplayer.gotoPrev()  });
+
      $('#wrapper .imgplayer-frame').css('border-color', '#555');
-
$(document).bind('keyup', 'up'  , function(){ $.imgplayer.gotoFirst() });
+
    }
-
$(document).bind('keyup', 'down' , function(){ $.imgplayer.gotoFull()  });
+
 
 +
 
 +
  </script>
-
});
 
-
 
-
/* 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');
 
-
}
 
-
 
-
function lightgreyStyle(){
 
-
changeBGColor('#333');
 
-
$('#wrapper #text').css('color','#666');
 
-
$('#wrapper .imgplayer-frame').css('border-color', '#555');
 
-
}
 
-
 
-
 
-
</script>
 
-
     <link href="../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">
var counter = 0;
var counter = 0;
-
</script>
+
var comicPages =8;
-
 
+
-
<script>
 
function incrementComicCounter(){
function incrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter>=7){
+
  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 = "Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
 +
      document.getElementById("comicpage").style.height="100%";
 +
      document.getElementById("comicpage").style.width="100%";
 +
  }
-
}
 
-
</script>
 
-
 
-
<script>
 
function decrementComicCounter(){
function decrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter<=0){
+
  if(counter<=0){
-
counter=7;
+
    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 = "Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
-
}
+
  }
</script>
</script>
Line 161: Line 126:
       <!-- Begin page content -->
       <!-- Begin page content -->
-
       <div class="container">
+
       <div class="container" padding-top:10px;"">
       <!-- Title -->
       <!-- Title -->
-
       <div class="page-header">
+
       <div class="page-header" style="padding-top:10px;">
-
           <h2><b>The Toximop Comic</b> </h2>
+
           <h2><b>University of Dundee 2013 iGEM team presents...</b> </h2>
         </div>
         </div>
       <!-- Title End -->
       <!-- Title End -->
-
<center>
+
  <div id="wrapper" style="margin-top:-35px;">
-
<div id="currentPage"> Page : 1 </div>
+
     
 +
    <img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
-
     <button onclick="decrementComicCounter()">Previous Page</button>
+
     <center>
-
<button onclick="incrementComicCounter()">Next 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>
-
<div id="wrapper">
+
      <div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
-
+
    </center>
-
<!-- That's the page.
+
  </div>
-
It's important to set the width & height attributes,
+
-
otherwise the image doesn't load in Webkit browsers -->
+
-
<img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
+
-
<!-- Optional: The demo textbox -->
+
    <div class="row">
-
<div id="text"></div>
+
    <div class="span12">
-
<!-- Optional: Navigation -->
+
     
-
<nav id="imgplayer-nav"></nav>
+
  <div class="row">
-
</center>
+
    <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>
-
     </div>
+
     </div>a
     <div id="footer">
     <div id="footer">
Line 202: Line 168:
     </div>
     </div>
-
 
+
    <!-- Le javascript
-
 
+
-
      <!-- Le javascript
+
     ================================================== -->
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <!-- Placed at the end of the document so the pages load faster -->

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"