Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
 
(76 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style>
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/anti-main.css&action=raw&ctype=text/css" type="text/css" >
-
      .pull-right{
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
      float: right}
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/Achievements_page.css&action=raw&ctype=text/css" type="text/css" >
-
 
+
 
-
  .thumbnail {
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
    border: 1px solid #ddd;
+
<script src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/access-menu.js&action=raw&ctype=text/css"></script>
-
    border-radius: 4px;
+
-
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+
-
    display: block;
+
-
    line-height: 20px;
+
-
    padding: 4px;
+
-
    transition: all 0.2s ease-in-out 0s;
+
-
}
+
-
    img {
+
-
    vertical-align: middle;}
+
-
element.style {
+
                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-
    text-align: justify;
+
             
-
    width: 450px;
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/team_basic.css&action=raw&ctype=text/css" type="text/css" />
-
}
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/galleriffic-2.css&action=raw&ctype=text/css" type="text/css" />
-
.pull-left {
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery-1.3.2.js&action=raw&ctype=text/css"></script>
-
    float: left;}
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.galleriffic.js&action=raw&ctype=text/css"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.opacityrollover.js&action=raw&ctype=text/css"></script>
 +
<!-- We only want the thunbnails to display when javascript is disabled -->
 +
<script type="text/javascript">
 +
document.write('<style>.noscript { display: none; }</style>');
 +
</script>
-
 
-
</style>
 
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
 
-
<script>
 
-
$(document).ready(function(){
 
-
  $(window).scroll(function(){
 
-
var scrollTop = $(window).scrollTop();
 
-
if (scrollTop > 49) {
 
-
$('#menu').addClass('fixed');
 
-
} else {
 
-
$('#menu').removeClass('fixed');
 
-
}
 
-
  });
 
-
});
 
-
</script>
 
-
<script>
 
-
var on = true;
 
-
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
 
-
 
-
function slides(i) {
 
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 
-
  document.getElementsByClassName("slide_pic")[2].style.width="100%";
 
-
  var slide = document.getElementsByClassName("slide_pic")[0];
 
-
  document.getElementById("slide").appendChild(slide);
 
-
  if(i) {
 
-
  on = false;
 
-
  }
 
-
}
 
-
function back_slide(i) {
 
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 
-
  document.getElementsByClassName("slide_pic")[0].style.width="100%";
 
-
  var slide = document.getElementsByClassName("slide_pic")[4];
 
-
  var slide2 = document.getElementsByClassName("slide_pic")[0];
 
-
  document.getElementById("slide").insertBefore(slide,slide2);
 
-
  if(i) {
 
-
  on = false;
 
-
  }
 
-
}
 
-
</script>
 
</head>
</head>
-
 
-
<body>
 
-
<div id='nav_container'>
 
-
<nav>
 
-
<ul id="menu">
+
<body>
-
<li><a href="#">Home</a></li>
+
<nav role="navigation">
-
        <li><a href="#">Team</a>
+
<ul class="access-menu">
-
        <!-- First Tier Drop Down -->
+
<li><a href="#">Home</a></li>
-
        <ul>
+
<li>
-
            <li><a href="#">Members</a></li>
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor">Pneumosensor</a>
-
            <li><a href="#">Advisers</a></li>
+
<ul class="access-submenu">
-
            <li><a href="#">Instructor</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_one">Sensing</a></li>
-
        </ul>      
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_two">Expressing</a></li>
-
        </li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/parts">Parts</a></li>
-
        <li><a href="#">Project</a>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/data">Data</a></li>
-
        <!-- First Tier Drop Down -->
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/characterization">Characterization</a></li>
-
        <ul>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/results">Results</a></li>
-
            <li><a href="#">Main Project</a>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/future_work">Future Work</a></li>
-
<ul>
+
</ul>
-
                <li><a href="#">Overview</a></li>
+
</li>
-
                <li><a href="#">Module one </a></li>
+
<li>
-
                <li><a href="#">Module two</a></li>
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator">Riboregulator</a>
-
<li><a href="#">Data</a></li>
+
<ul class="access-submenu">
-
<li><a href="#">Characterization</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/CR_TA_Feature_Page">Feature Page</a></li>
-
            </ul></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/RNA_devices_catalog">Catalog Page</a></li>
-
            <li><a href="#">Side Project</a>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/parts">Parts</a></li>
-
<ul>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/data">Data</a></li>
-
                <li><a href="#">Overview</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/characterization">Characterization</a></li>
-
                <li><a href="#">Parts</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/results">Results</a></li>
-
                <li><a href="#">Catalogue</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/future_work">Future Work</a></li>
-
<li><a href="#">Feature pages</a></li>
+
</ul>
-
            </ul></li>
+
</li>
-
       
+
<li>
-
        </ul>
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice">Human Practice</a>
-
        </li>
+
<ul class="access-submenu">
-
        <li><a href="#">Human Practice</a>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit">Start-up Kit</a></li>
-
<ul>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/handbook" >--Handbook</a></li>
-
                <li><a href="#">Overview</a></li>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/report" >--Report</a></li>
-
                <li><a href="#">Start up kit</a>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/database" >--Database</a></li>
-
<ul>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/interview" >--Interview</a></li>
-
<li><a href="#">Interview</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach">Outreach</a></li>
-
<li><a href="#">Report</a></li>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/Workshop" >--Workshop</a></li>
-
<li><a href="#">Database</a></li>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/talks" >--Talk</a></li>
-
</ul></li>
+
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/isf_academy" >--ISF Academy</a></li>
-
                <li><a href="#">Talks</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/safety_and_ethics">Safety and Ethics</a></li>
-
<li><a href="#">Outreach</a></li>
+
</ul>
-
            </ul></li>
+
</li>
-
        <li><a href="#">wetlab</a>
+
<li>
-
<ul>
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a>
-
<li><a href="#">Protocol</a></li>
+
<ul class="access-submenu">
-
<li><a href="#">Notebook</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/members">Members</a></li>
-
<li><a href="#">Safety</a></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/advisors">Advisors</a></li>
-
</ul></li>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/instructors">Instructors</a></li>
-
        <li><a href="#">Achievement</a>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/attribution">Attributions</a></li>
-
<ul>
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/acknowledgement">Acknowledgement</a></li>
-
<li><a href="#">Medal Requirement</a></li>
+
<li><a href="https://igem.org/Team.cgi?year=2014">Official Team Profile</a></li>
-
<li><a href="#">Deliverable</a></li>
+
</ul>
-
</ul></li>
+
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab">Wetlab</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/notebook">Notebook</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/protocols">Protocols</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/Achievements">Achievements</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/medal_requirement">Medal Requirements</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/deliverable">Deliverable</a></li>
 +
</ul>
 +
</li>
 +
<li class="access_logo">
 +
<a href="https://2014.igem.org/Main_Page"><img src= "https://static.igem.org/mediawiki/2014/5/55/Hkust_logo.gif"></a>
 +
</li>
 +
<li class="access_logo">
 +
<a href="http://www.ust.hk/"><img src= "https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"></a>
 +
</li>
 +
 +
 
</ul>
</ul>
-
 
</nav>
</nav>
-
</div>
+
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
-
<h1> </h1>
+
 +
 +
<div id="content_container">
 +
<div class= "banner_area">
 +
<img src= 'https://static.igem.org/mediawiki/2014/archive/3/3c/20140930022303!HKUST_2014_pneumosensor_banner.jpg' />
 +
<!--banner should be larger and height should be more than 400px-->
 +
</div>
 +
<div id="page">
 +
<div id="container">
 +
 +
<div id="gallery" class="content">
 +
 +
<div class="slideshow-container">
 +
<div id="loading" class="loader"></div>
 +
<div id="slideshow" class="slideshow"></div>
 +
</div>
 +
<div id="caption" class="caption-container"></div>
 +
</div>
 +
<div id="thumbs" class="navigation">
 +
<ul class="thumbs noscript">
 +
<li>
 +
<a class="thumb" name="leaf"  href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
 +
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" >
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Haemin Cho</div>
 +
                              <div class="title" style="margin-top:0px">Team Leader</div>
 +
<div class="image-desc" style="font-size:15px;  margin-top: -10px;">Haemin is a second year student majoring in Biotechnology. She is one of the two leaders of this year's HKUST iGEM Team. In the lab, she works diligently and is very helpful when needed. But most of the times, she looks blank-minded and often makes small careless mistakes. Her trademark quote is "What did I just do? *blank face*" </div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
 +
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
 +
</a>
 +
<div class="caption">
 +
                            <div class="image-title">BONGSO, Nadia Benedicta</div>
 +
"She is one of the rare team member that does not major in Life Science, she is a year 2 student majoring Chemical and Biomolecular Engineering(but still, Bio is involved). She is one of the 3-man Indonesian gang, which contributes to most of the noise in lab. She is indeed very helpful in the lab, such as helping to fill boxes of tips just after a few hours she landed in HK. She also helped much in Human Practice work.
 +
She is quite absent-minded about her iPad, luckily she does not forget her lab work. She LOVES people calling her surname, and she really likes Hong Kong Disneyland."
 +
</div>
 +
</li>
-
<div id="content_container">
+
<li>
-
<div class= "banner_area">
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
<img src= 'banner_mod.png' />
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Jordy Evan Sulaiman</div>
 +
<div class="image-desc">Jordy is a year two student majoring in chemical and bimolecular engineering. He is hard-working, diligent, and creative. He also likes to eat, play basketball, and play computer games. Above all, he likes Doyle the most. Though Jordy is very funny, sometimes he can be extremely serious when doing something. The scary part of Jordy is that he is good at everything, even arts. Everyone likes Jordy. </div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
 +
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">WIDJAJA, Angeline</div>
 +
<div class="image-desc">Angeline a.k.a Angie is the angel of iGEM. She is a cheerful lady who likes to work but also have fun at the same time. She loves to play basketball and play games with other people. She is excellent in making friends with other people. There's nothing bad about her except for her spontaneous randomness. But that characteristic of her is what makes iGEM fun in some way or another. Interesting and unique people are the ones who everyone should cherish. </div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
 +
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title" style="margin-left: auto;margin-right: auto;width: 70%;background-color: #b0e0e6>Haemin Cho</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
 +
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #5</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
 +
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #6</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
 +
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #7</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
 +
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #8</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
 +
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #9</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
 +
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #10</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
 +
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #11</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
 +
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #12</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
 +
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #13</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
 +
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #14</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                       
 +
                        <li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
                       
 +
</ul>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
</div>
</div>
-
+
<div id="footer">&copy; 2009 Trent Foley</div>
-
<!DOCTYPE html>
+
<script type="text/javascript">
-
<html>
+
jQuery(document).ready(function($) {
-
<head>
+
// We only want these styles applied when javascript is enabled
-
<link rel="stylesheet" type="text/css" href="style.css">
+
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
-
<meta charset=utf-8 />
+
$('div.content').css('display', 'block');
-
<title>HTML5 jQuery Tabs</title>
+
-
</head>
+
-
<body>
+
-
  <div class="tabs">
+
-
    <a data-toggle="tab1">Tab1</a>
+
-
    <a data-toggle="tab2">Tab2</a>
+
-
    <a data-toggle="tab3">Tab3</a>
+
-
    <a data-toggle="tab4">Tab4</a>
+
-
    <a data-toggle="tab5">Tab5</a>
+
-
  </div>
+
-
<div class="tabContent"> 
+
-
  <div id="tab1">
+
-
    <h5>Tab1</h5>
+
-
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget sollicitudin nibh. Duis semper, diam sed iaculis dictum, libero erat molestie dui, ac suscipit felis leo sed ipsum. </p>
+
-
  </div>
+
-
 
+
-
  <div id="tab2">
+
-
   
+
-
    <h5>Tab2</h5>
+
-
    <p>Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.</p>
+
-
  </div>
+
-
 
+
-
  <div id="tab3">
+
-
    <h5>Tab3</h5>
+
-
    <p>Duis justo mi, egestas euismod placerat a, eleifend vitae lacus. Integer non odio nec libero lacinia vulputate. Phasellus ante lectus, congue vel volutpat vitae, dictum quis est. </p>
+
-
  </div>
+
-
 
+
-
  <div id="tab4">
+
-
    <h5>Tab4</h5>
+
-
    <p>Nulla varius sit amet augue vel consequat. Aenean faucibus vehicula interdum. Integer eleifend, lectus eget vulputate feugiat, nibh nulla congue ipsum, eu mattis tortor nulla vitae diam. Maecenas rutrum risus non libero ullamcorper, nec vehicula sapien tincidunt. </p>
+
-
  </div>
+
-
 
+
-
  <div id="tab5">
+
-
    <h5>Tab5</h5>
+
-
    <p>Suspendisse vulputate ornare dui, sed luctus est mattis nec. Curabitur ut dolor eleifend, vulputate purus et, ullamcorper tortor. In posuere ultricies lectus. Vestibulum vitae odio ut est sagittis porta. </p>
+
-
  </div>
+
-
 
+
-
</div>
+
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
// Initially set opacity on thumbs and add
-
<script src="html5jtabs.js"></script>
+
// additional styling for hover effect on thumbs
-
<script>
+
var onMouseOutOpacity = 0.67;
-
$(function() {
+
$('#thumbs ul.thumbs li').opacityrollover({
-
  $(".tabs a").html5jTabs();
+
mouseOutOpacity:  onMouseOutOpacity,
-
});
+
mouseOverOpacity:  1.0,
-
</script>
+
fadeSpeed:        'fast',
-
</body>
+
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2500,
 +
numThumbs:                21,
 +
preloadAhead:              10,
 +
enableTopPager:            true,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            7,
 +
imageContainerSel:        '#slideshow',
 +
controlsContainerSel:      '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
autoStart:                false,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 900,
 +
onSlideChange:            function(prevIndex, nextIndex) {
 +
// 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
this.find('ul.thumbs').children()
 +
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
.eq(nextIndex).fadeTo('fast', 1.0);
 +
},
 +
onPageTransitionOut:      function(callback) {
 +
this.fadeTo('fast', 0.0, callback);
 +
},
 +
onPageTransitionIn:        function() {
 +
this.fadeTo('fast', 1.0);
 +
}
 +
});
 +
});
 +
</script>
 +
</body>
</html>
</html>

Latest revision as of 18:03, 30 September 2014

Retrieved from "http://2014.igem.org/Team:Hong_Kong_HKUST/astrid"