Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
 
(75 intermediate revisions not shown)
Line 1: Line 1:
-
.tabs a{
+
<html>
-
  cursor: pointer;
+
<head>
-
  padding: 5px;
+
<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" >
-
  background: #fff;
+
<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" >
-
  color: #000;
+
<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" >
-
  border: 1px solid #666;
+
-
  border-bottom: 0;
+
-
}
+
-
.tabs a:hover, .tabs a.active{
+
-
  background: #666;
+
-
  color: #fff;
+
-
}
+
-
.tabContent{
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
  border: 1px solid #aaa;
+
<script src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/access-menu.js&action=raw&ctype=text/css"></script>
-
  margin: 4px 0;
+
-
  padding: 5px;
+
                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-
}
+
             
 +
<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" />
 +
<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>
 +
<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>
 +
 +
<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" >
-
;(function($){
+
-
  $.fn.html5jTabs = function(options){
+
</head>
-
    return this.each(function(index, value){
+
-
      var obj = $(this),
+
<body>
-
      objFirst = obj.eq(index),
+
<nav role="navigation">
-
      objNotFirst = obj.not(objFirst);
+
<ul class="access-menu">
-
     
+
<li><a href="#">Home</a></li>
-
      $("#" +  objNotFirst.attr("data-toggle")).hide();
+
<li>
-
      $(this).eq(index).addClass("active");
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor">Pneumosensor</a>
-
     
+
<ul class="access-submenu">
-
      obj.click(function(evt){
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_one">Sensing</a></li>
-
       
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_two">Expressing</a></li>
-
        toggler = "#" + obj.attr("data-toggle");
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/parts">Parts</a></li>
-
        togglerRest = $(toggler).parent().find("div");
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/data">Data</a></li>
-
       
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/characterization">Characterization</a></li>
-
        togglerRest.hide().removeClass("active");
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/results">Results</a></li>
-
        $(toggler).show().addClass("active");
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/future_work">Future Work</a></li>
-
       
+
</ul>
-
        $(this).parent("div").find("a").removeClass("active");
+
</li>
-
$(this).addClass("active");
+
<li>
-
        return false;
+
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator">Riboregulator</a>
-
      });
+
<ul class="access-submenu">
-
    });
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/CR_TA_Feature_Page">Feature Page</a></li>
-
  };
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/RNA_devices_catalog">Catalog Page</a></li>
-
}(jQuery));
+
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/data">Data</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/characterization">Characterization</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/results">Results</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/future_work">Future Work</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice">Human Practice</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit">Start-up Kit</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/handbook" >--Handbook</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 class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/database" >--Database</a></li>
 +
<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="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach">Outreach</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/Workshop" >--Workshop</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/talks" >--Talk</a></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="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/safety_and_ethics">Safety and Ethics</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/members">Members</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/advisors">Advisors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/instructors">Instructors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/attribution">Attributions</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://igem.org/Team.cgi?year=2014">Official Team Profile</a></li>
 +
</ul>
 +
</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>
 +
-
$(function() {
+
</ul>
-
  $(".tabs a").html5jTabs();
+
</nav>
-
});
+
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
 +
 +
 +
<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>
-
<!DOCTYPE html>
+
<li>
-
<html>
+
<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
-
<head>
+
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
</a>
-
<meta charset=utf-8 />
+
<div class="caption">
-
<title>HTML5 jQuery Tabs</title>
+
                            <div class="image-title">BONGSO, Nadia Benedicta</div>
-
</head>
+
"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.
-
<body>
+
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 class="tabs">
+
</div>
-
    <a data-toggle="tab1">Tab1</a>
+
</li>
-
    <a data-toggle="tab2">Tab2</a>
+
 
-
    <a data-toggle="tab3">Tab3</a>
+
<li>
-
    <a data-toggle="tab4">Tab4</a>
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
    <a data-toggle="tab5">Tab5</a>
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
  </div>
+
</a>
-
<div class="tabContent">
+
<div class="caption">
-
  <div id="tab1">
+
-
    <h5>Tab1</h5>
+
<div class="image-title">Jordy Evan Sulaiman</div>
-
    <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 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>
+
</div>
-
 
+
</li>
-
  <div id="tab2">
+
 
-
   
+
<li>
-
    <h5>Tab2</h5>
+
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
-
    <p>Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.</p>
+
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
-
  </div>
+
</a>
-
 
+
<div class="caption">
-
  <div id="tab3">
+
-
    <h5>Tab3</h5>
+
<div class="image-title">WIDJAJA, Angeline</div>
-
    <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 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>
+
</div>
-
 
+
</li>
-
  <div id="tab4">
+
 
-
    <h5>Tab4</h5>
+
<li>
-
    <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>
+
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
-
  </div>
+
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
-
 
+
</a>
-
  <div id="tab5">
+
<div class="caption">
-
    <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 class="image-title" style="margin-left: auto;margin-right: auto;width: 70%;background-color: #b0e0e6>Haemin Cho</div>
-
  </div>
+
<div class="image-desc">Description</div>
-
 
+
</div>
-
</div>
+
</li>
-
</body>
+
 
 +
<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 id="footer">&copy; 2009 Trent Foley</div>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
// We only want these styles applied when javascript is enabled
 +
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
 +
 
 +
// Initially set opacity on thumbs and add
 +
// additional styling for hover effect on thumbs
 +
var onMouseOutOpacity = 0.67;
 +
$('#thumbs ul.thumbs li').opacityrollover({
 +
mouseOutOpacity:  onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
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"