Team:KAIST Korea/Team

From 2013.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<head>
 +
 +
  <style type="text/css" media="screen">
 +
    body    {
 +
      background-color: #aaaaaa;
 +
      font: 10px futura, helvetica, helvetica neue;
 +
    }
 +
    #credits {
 +
      position: absolute;
 +
      bottom:  10px; right: 10px;
 +
      opacity:  0.5;
 +
    }
 +
    #slider {
 +
      width: 400px;
 +
      margin: auto;
 +
    }
 +
    #container {
 +
      background-color: #aaaaaa;
 +
    position:        relative;
 +
      border:          0px solid red;
 +
      height:          400px;
 +
      margin:          auto;
 +
    margin-top :      100px;
 +
    margin-bottom :  40px;
 +
    overflow:        hidden;
 +
  }
 +
</style>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16.5" />
<meta name="generator" content="MediaWiki 1.16.5" />
Line 17: Line 43:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://coulisse.luvdasun.com/assets/jquery.ui.coulisse.min.js"></script>
<script type="text/javascript" src="http://coulisse.luvdasun.com/assets/jquery.ui.coulisse.min.js"></script>
 +
<style type="text/css">
 +
 +
body{
 +
background: #333;
 +
color: #fff;
 +
font: 85% Lucida Grande, Lucida Sans Unicode;
 +
position: relative;
 +
}
 +
 +
#container{
 +
margin: 30px auto;
 +
width: 602px;
 +
}
 +
 +
#controls{
 +
margin-bottom: 20px;
 +
}
 +
 +
#__cvfl-coverflow{
 +
height: 375px;
 +
margin: auto;
 +
overflow: hidden;
 +
position: relative;
 +
width: 530px;
 +
}
 +
 +
#__cvfl-coverflow-label{
 +
color: #fff;
 +
font: 14pt Lucida Grande, Lucida Sans Unicode;
 +
line-height: 1.3em;
 +
position: relative;
 +
text-align: center;
 +
top: 273px;
 +
z-index: 700;
 +
}
 +
 +
#content h1{
 +
margin: 30px 0 10px;
 +
}
 +
 +
#cv{
 +
background: #3a3a3a;
 +
border: 1px solid #888;
 +
position: relative;
 +
}
 +
 +
</style>
<style type="text/css">
<style type="text/css">
.CoulisseDemo
.CoulisseDemo
Line 1,067: Line 1,140:
</div>
</div>
   
   
-
<h2 id="title40">
 
-
        </h2>
 
-
        <h3 id="subtitle40">
 
-
        </h3>
 
-
        <div id="coulisseDemo40" class="CoulisseDemo">
 
-
        </div>
 
-
        <script type="text/javascript">
 
-
            jQuery(function ($) {
 
-
                /*
+
-
                cache the title, subtitle and coulisse containers
+
-
                */
+
-
                var $title = $('#title40');
+
-
                var $subtitle = $('#subtitle40');
+
-
                var $coulisse = $('#coulisseDemo40');
+
-
 
+
-
                /*
+
-
                Declare an array of objects that contain the images, titles and subtitles
+
-
                */
+
-
                var myImages = [
+
-
                    { src: '/Content/Tiger.jpg', title: 'Tiger', subtitle: 'grrrr...' }
+
-
                    , { src: '/Content/Duck.jpg', title: 'Duck', subtitle: 'quack!' }
+
-
                    , { src: '/Content/Moes.jpg', title: 'Moes', subtitle: 'Miauw' }
+
-
                    , { src: '/Content/Moos.jpg', title: 'Moos', subtitle: 'Prrr' }
+
-
                    , { src: '/Content/Lion.jpg', title: 'Lion', subtitle: 'Yummy' }
+
-
                    ];
+
-
 
+
-
                /*
+
-
                handy function that sets the content of the title and subtitle to the
+
-
                specified entry in myImages
+
-
                */
+
-
                var setTitles = function (entryIndex) {
+
-
                    var entry = myImages[entryIndex];
+
-
                    $title.text(entry.title);
+
-
                    $subtitle.text(entry.subtitle);
+
-
                };
+
-
 
+
-
                /*
+
-
                pseudo random value for the initial image
+
-
                */
+
-
                var initialIndex = (new Date().valueOf()) % myImages.length;
+
-
 
+
-
                /*
+
-
                Initialize the coulisse container
+
-
                */
+
-
                $coulisse
+
-
                .coulisse({
+
-
                    images: myImages
+
-
                    , imageSrcGetter: 'src' // the member of an entry in the images array thet holds the source url of the image
+
-
                    , index: initialIndex // set the index to the (pseudo random) initial index
+
-
                    , activeSize: 500
+
-
                    , inactiveSize: 200
+
-
                    , indexChanging: function (e, arg) {
+
-
                        /*
+
-
                        update the title and subtitle when the index is changing
+
-
                        */
+
-
                        setTitles(arg.index);
+
-
                    }
+
-
                })
+
-
                ;
+
-
 
+
-
 
+
-
                /*
+
-
                some fancy code to handle the mousewheel event
+
-
                */
+
-
                var mousewheelTimeoutHandle = null;
+
-
                var mousewheelIndex = null;
+
-
                $coulisse
+
-
                .bind('mousewheel', function (event, delta) {
+
-
                    window.clearTimeout(mousewheelTimeoutHandle);
+
-
                    if (mousewheelIndex === null) {
+
-
                        mousewheelIndex = $coulisse.coulisse('option', 'index');
+
-
                    }
+
-
                    mousewheelIndex += delta;
+
-
                    mousewheelIndex = Math.min(myImages.length - 1, mousewheelIndex);
+
-
                    mousewheelIndex = Math.max(0, mousewheelIndex);
+
-
                    $coulisse.coulisse('option', 'index', Math.round(mousewheelIndex));
+
-
                    mousewheelTimeoutHandle = window.setTimeout(function () {
+
-
                        mousewheelIndex = null;
+
-
                    }, 300);
+
-
                    return false;
+
-
                })
+
-
                ;
+
-
 
+
-
                /*
+
-
                set the titles to their initial values
+
-
                */
+
-
                setTitles(initialIndex);
+
-
 
+
-
            });    //jQuery
+
-
        </script>
+

Latest revision as of 10:13, 23 August 2013

Team:KAIST Korea/Project Background - 2013.igem.org

Retrieved from "http://2013.igem.org/Team:KAIST_Korea/Team"