Team:Hong Kong HKUST/astrid
From 2014.igem.org
(Difference between revisions)
(46 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
- | < | + | <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" > |
- | + | <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=Team:Hong_Kong_HKUST/Achievements_page.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 src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/access-menu.js&action=raw&ctype=text/css"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <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" > | <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" > | ||
- | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <nav role="navigation"> | ||
+ | <ul class="access-menu"> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li> | ||
+ | <a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor">Pneumosensor</a> | ||
+ | <ul class="access-submenu"> | ||
+ | <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> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/parts">Parts</a></li> | ||
+ | <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> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/results">Results</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/future_work">Future Work</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <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> | ||
+ | <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> | ||
+ | |||
- | < | + | </ul> |
- | + | </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> | ||
- | + | <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> | ||
+ | <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">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"> |
- | <title> | + | |
- | < | + | <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 class=" | + | </div> |
- | + | </li> | |
- | <div | + | <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> | |
- | <img | + | </div> |
- | </a> | + | </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"> |
- | </a> | + | |
- | + | <div class="image-title">Title #2</div> | |
- | < | + | <div class="image-desc">Description</div> |
- | + | </div> | |
- | < | + | </li> |
- | + | <li> | |
- | <a class=" | + | <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> | |
- | </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">© 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'); | |
- | + | ||
- | + | ||
- | + | ||
- | $(function() { | + | // Initially set opacity on thumbs and add |
- | + | // additional styling for hover effect on thumbs | |
- | }); | + | var onMouseOutOpacity = 0.67; |
- | </script> | + | $('#thumbs ul.thumbs li').opacityrollover({ |
- | </body> | + | 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: '‹ Previous Photo', | ||
+ | nextLinkText: 'Next Photo ›', | ||
+ | nextPageLinkText: 'Next ›', | ||
+ | prevPageLinkText: '‹ 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