Team:KAIST Korea/Team

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<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>
 +
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
<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 1,067: Line 1,069:
</div>
</div>
   
   
-
<h2 id="title40">
+
<div id="DivCoverFlowFX"></div>
-
        </h2>
+
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/202315040/kaist/swfobject.js"></script>
-
        <h3 id="subtitle40">
+
<script type="text/javascript">
-
        </h3>
+
var flashvars = {};
-
        <div id="coulisseDemo40" class="CoulisseDemo">
+
var params = {};
-
        </div>
+
params.base = "";
-
        <script type="text/javascript">
+
params.scale = "noscale";
-
            jQuery(function ($) {
+
params.salign = "tl";
-
 
+
params.wmode = "transparent";
-
                /*
+
params.allowFullScreen = "true";
-
                cache the title, subtitle and coulisse containers
+
params.allowScriptAccess = "always";
-
                */
+
swfobject.embedSWF("CoverFlowFX.swf", "DivCoverFlowFX", "600", "320", "9.0.0", false, flashvars, params);
-
                var $title = $('#title40');
+
</script>
-
                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>
+

Revision as of 09:09, 22 August 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:KAIST Korea/Project Background - 2013.igem.org


Team





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