|
|
(10 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
- | <head>
| |
- | <style type="text/css">
| |
- | /*
| |
- | * jQuery FlexSlider v2.0
| |
- | * http://www.woothemes.com/flexslider/
| |
- | *
| |
- | * Copyright 2012 WooThemes
| |
- | * Free to use under the GPLv2 license.
| |
- | * http://www.gnu.org/licenses/gpl-2.0.html
| |
- | *
| |
- | * Contributing author: Tyler Smith (@mbmufffin)
| |
- | */
| |
- | /* Browser Resets */
| |
- | .flex-container a:active,
| |
- | .flexslider a:active,
| |
- | .flex-container a:focus,
| |
- | .flexslider a:focus{
| |
- | outline:none;
| |
- | }
| |
- | .slides,
| |
- | .flex-control-nav,
| |
- | .flex-direction-nav{
| |
- | margin:0;
| |
- | padding:0;
| |
- | list-style:none;
| |
- | }
| |
- | /* FlexSlider Necessary Styles
| |
- | *********************************/
| |
- | .flexslider{
| |
- | margin:0;
| |
- | padding:0;
| |
- | }
| |
- | .flexslider .slides > li{
| |
- | display:none;
| |
- | -webkit-backface-visibility:hidden;
| |
- | -moz-backface-visibility:hidden;
| |
- | -ms-backface-visibility:hidden;
| |
- | -o-backface-visibility:hidden;
| |
- | backface-visibility:hidden;
| |
- | }
| |
- | /* Hide the slides before the JS is loaded. Avoids image jumping */
| |
- | .flexslider .slides img{
| |
- | width:100%;
| |
- | display:block;
| |
- | }
| |
- | .flex-pauseplay span{
| |
- | text-transform:capitalize;
| |
- | }
| |
- | /* Clearfix for the .slides element */
| |
- | .flexslider a.intro {
| |
- | bottom:0;
| |
- | color:rgba(0, 0, 0, 0.1);
| |
- | font-size:14px;
| |
- | position:absolute;
| |
- | right:0;
| |
- | text-decoration:none;
| |
- | z-index:99999;
| |
- | }
| |
- | .slides:after{
| |
- | content:".";
| |
- | display:block;
| |
- | clear:both;
| |
- | visibility:hidden;
| |
- | line-height:0;
| |
- | height:0;
| |
- | }
| |
- | html[xmlns] .slides{
| |
- | display:block;
| |
- | }
| |
- | * html .slides{
| |
- | height:1%;
| |
- | }
| |
- | /* No JavaScript Fallback */
| |
- | /* If you are not using another script, such as Modernizr, make sure you
| |
- | * include js that eliminates this class on page load */
| |
- | .no-js .slides > li:first-child{
| |
- | display:block;
| |
- | }
| |
- | /* FlexSlider Default Theme
| |
- | *********************************/
| |
- | .flexslider{
| |
- | margin:0 0 60px;
| |
- | background:#fff;
| |
- | border:4px solid #fff;
| |
- | position:relative;
| |
- | -webkit-border-radius:4px;
| |
- | -moz-border-radius:4px;
| |
- | border-radius:4px;
| |
- | -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
- | -moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
- | box-shadow:0 1px 4px rgba(0,0,0,.2);
| |
- | zoom:1;
| |
- | }
| |
- | .flex-viewport{
| |
- | max-height:2000px;
| |
- | -webkit-transition:all 1s ease;
| |
- | -moz-transition:all 1s ease;
| |
- | -o-transition:all 1s ease;
| |
- | transition:all 1s ease;
| |
- | }
| |
- | .loading .flex-viewport{
| |
- | max-height:300px;
| |
- | }
| |
- | .flexslider .slides{
| |
- | zoom:1;
| |
- | }
| |
- | .carousel li{
| |
- | margin-right:5px;
| |
- | }
| |
- | /* Direction Nav */
| |
- | .flexslider li {
| |
- | border: 0 none !important;
| |
- | padding: 0 !important;
| |
- | text-indent: 0 !important;
| |
- | }
| |
- | .flex-direction-nav a{
| |
- | width:30px;
| |
- | height:30px;
| |
- | margin:-20px 0 0;
| |
- | display:block;
| |
- | background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
| |
- | position:absolute;
| |
- | top:50%;
| |
- | cursor:pointer;
| |
- | text-indent:-9999px;
| |
- | opacity:0;
| |
- | -webkit-transition:all .3s ease;
| |
- | -moz-transition:all .3s ease;
| |
- | -o-transition:all .3s ease;
| |
- | transition:all .3s ease;
| |
- | }
| |
- | .flex-direction-nav .flex-next{
| |
- | background-position:100% 0;
| |
- | right:-36px;
| |
- | }
| |
- | .flex-direction-nav .flex-prev{
| |
- | left:-36px;
| |
- | }
| |
- | .flexslider:hover .flex-next{
| |
- | opacity:0.8;
| |
- | right:5px;
| |
- | }
| |
- | .flexslider:hover .flex-prev{
| |
- | opacity:0.8;
| |
- | left:5px;
| |
- | }
| |
- | .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
| |
- | opacity:1;
| |
- | }
| |
- | .flex-direction-nav .disabled{
| |
- | opacity:.3!important;
| |
- | filter:alpha(opacity=30);
| |
- | cursor:default;
| |
- | }
| |
- | /* Control Nav */
| |
- | .flex-control-nav{
| |
- | width:100%;
| |
- | position:absolute;
| |
- | bottom:-40px;
| |
- | text-align:center;
| |
- | }
| |
- | .flex-control-nav li{
| |
- | margin:0 6px;
| |
- | display:inline-block;
| |
- | zoom:1;
| |
- | *display:inline;
| |
- | }
| |
- | .flex-control-paging li a{
| |
- | width:11px;
| |
- | height:11px;
| |
- | display:block;
| |
- | background:#666;
| |
- | background:rgba(0,0,0,0.5);
| |
- | cursor:pointer;
| |
- | text-indent:-9999px;
| |
- | -webkit-border-radius:20px;
| |
- | -moz-border-radius:20px;
| |
- | border-radius:20px;
| |
- | -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
- | -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
- | box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
| |
- | }
| |
- | .flex-control-paging li a:hover{
| |
- | background:#333;
| |
- | background:rgba(0,0,0,0.7);
| |
- | }
| |
- | .flex-control-paging li a.flex-active{
| |
- | background:#000;
| |
- | background:rgba(0,0,0,0.9);
| |
- | cursor:default;
| |
- | }
| |
- | .flex-control-thumbs{
| |
- | margin:5px 0 0;
| |
- | position:static;
| |
- | overflow:hidden;
| |
- | }
| |
- | .flex-control-thumbs li{
| |
- | width:25%;
| |
- | float:left;
| |
- | margin:0;
| |
- | }
| |
- | .flex-control-thumbs img{
| |
- | width:100%;
| |
- | display:block;
| |
- | opacity:.7;
| |
- | cursor:pointer;
| |
- | }
| |
- | .flex-control-thumbs img:hover{
| |
- | opacity:1;
| |
- | }
| |
- | .flex-control-thumbs .active{
| |
- | opacity:1;
| |
- | cursor:default;
| |
- | }
| |
- | </style>
| |
- | <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
| |
- | <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
| |
- | <script type="text/javascript">
| |
- | $(document).ready(function(){
| |
- | $(window).load(function() {
| |
- | $('.flexslider').flexslider({
| |
- | animation: "slide",
| |
- | animationLoop: false,
| |
- | itemWidth: 210,
| |
- | itemMargin: 0,
| |
- | minItems: 1,
| |
- | maxItems: 1
| |
- | });
| |
- | });
| |
- | });
| |
- | </script>
| |
- | </head>
| |
| <body> | | <body> |
| <div class="flexslider"> | | <div class="flexslider"> |
Line 248: |
Line 16: |
| | | |
| <li><img src="https://static.igem.org/mediawiki/2014/d/d8/%E7%94%9F%E7%A7%91%E7%87%9F.JPG" title="In July, our department held a bio-camp in which we spent a morning <br> teaching them what synthetic biology is and introducing iGEM to them. "></li> | | <li><img src="https://static.igem.org/mediawiki/2014/d/d8/%E7%94%9F%E7%A7%91%E7%87%9F.JPG" title="In July, our department held a bio-camp in which we spent a morning <br> teaching them what synthetic biology is and introducing iGEM to them. "></li> |
- | <li><img src="https://static.igem.org/mediawiki/2014/d/da/%E7%B6%A0%E5%B8%82%E9%9B%861.JPG" title="To further understand the practicability of our device, we visited <br> the Green Market in NTHU where we interviewed with organic agriculture farmers. "></li> | + | <li><img src="https://static.igem.org/mediawiki/2014/0/0e/Green.jpg" title="To further understand the practicability of our device, we visited <br> the Green Market in NTHU where we interviewed with organic agriculture farmers. "></li> |
- | <li><img src="https://static.igem.org/mediawiki/2014/e/e4/%E7%B6%A0%E5%B8%82%E9%9B%862.JPG" title="In green market, We also designed questionnaires for farmers to publicize how our device works."></li> | + | <li><img src="https://static.igem.org/mediawiki/2014/b/bd/456.jpg" title="In green market, We also designed questionnaires for farmers to publicize how our device works."></li> |
- | <li><img src="https://static.igem.org/mediawiki/2014/2/2f/%E9%A6%96%E7%88%BE%E5%A4%A7%E5%AD%B8.jpg" title="Researchers from the Seoul National University came to visit us in NCTU.<br> Therefore, we shared them with our experiences in establishing an iGEM team. "></li> | + | <li><img src="https://static.igem.org/mediawiki/2014/5/5e/Uuu.jpg" title="Researchers from the Seoul National University came to visit us in NCTU.<br> Therefore, we shared them with our experiences in establishing an iGEM team. "></li> |
| | | |
| | | |