|
|
| Line 8: |
Line 8: |
| | <link rel="stylesheet" href="css/style.css"> | | <link rel="stylesheet" href="css/style.css"> |
| | <style> | | <style> |
| − | main {
| + | #slider8 { |
| − | width: 98vw; | + | padding:10vh 6vw 20vh 6vw; |
| − | height: calc(100vh - 18px); | + | background:#EDEEF0; |
| − | position: relative;
| + | |
| | } | | } |
| | | | |
| − | .window { | + | #slider8 .h1 { |
| − | width: 4vw; | + | font-family: "Lato", Arial, Verdana; |
| − | height: 4vw; | + | font-weight: 100; |
| − | position: absolute; | + | color: #444649; |
| | + | line-height:1.1; |
| | + | font-size:1.75rem; |
| | + | padding:1.25rem 0 0.625rem 0; |
| | } | | } |
| | | | |
| − | #window1 ,#window4 .window-placeholder { | + | #slider8 .p { |
| − | left: 0; | + | color: #939393; |
| − | top: 0; | + | font-family: 'Open Sans',sans-serif; |
| | + | font-weight:300; |
| | + | line-height:1.42857; |
| | + | font-size:1.1rem; |
| | + | text-align:center; |
| | } | | } |
| | | | |
| − | #window2 ,#window3 .window-placeholder { | + | #slider8 .carousel-indicators { |
| − | right: 0; | + | bottom:-3rem; |
| − | top: 0;
| + | |
| | } | | } |
| | | | |
| − | #window3 ,#window2 .window-placeholder { | + | #slider8 .carousel-indicators li { |
| − | left: 0; | + | border-color:#33cccc; |
| − | bottom: 0;
| + | |
| | } | | } |
| | | | |
| − | #window4 ,#window1 .window-placeholder { | + | #slider8 .carousel-indicators li.active { |
| − | right: 0;
| + | background-color:#33cccc; |
| − | bottom: 0;
| + | |
| − | /*height:calc(100vh - 18px - 8vw);*/
| + | |
| − | }
| + | |
| − | | + | |
| − | .window > div {
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .window-placeholder {
| + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | position:absolute;
| + | |
| − | z-index:15;
| + | |
| − | }
| + | |
| − | | + | |
| − | .window-placeholder img {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .window-content {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .window-content .p {
| + | |
| − | padding:1rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #wowslider-wrapper {
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #wowslider-container1 {
| + | |
| − | margin: 0;
| + | |
| | } | | } |
| | </style> | | </style> |
| | <script> | | <script> |
| − | var vw = 0;
| + | |
| − | var vh = 0;
| + | |
| − | function calibrate_ruler() {
| + | |
| − | vw = $('#ruler').width();
| + | |
| − | vh = $('#ruler').height();
| + | |
| − | };
| + | |
| | | | |
| − | var exit_full_screen_png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNrsV+0NgyAQPS4dwAkau4Ej2clko7pBSRexh6XmQpGPivCHl1w0fLz3QJADgLBcoaN4UEzgQag+po2uN1odWOKLicnTcYkwEOQw8TFhiTtN8I6RBrwc3ARS3ezgGb8E5jlCOmI4ZhFooCh6XiBeIEIzEOIwkMR1F9biCY70DwOwJ65fkBHrAgnnYxNfdR0jeO5MWY4ZUNT/xgvQsYf7E0ff27sDU9dABozcBBYW/zFxqSDOTTQ0NDSASP0RZTqOt5MRCx7DzmMZC+cCLSFpCUlyQqIyCCqfCfSIS/O95MEFt8exmtAzMPhW6oHdEcMx1L+c1r6evwUYACKt3Vlo4XE8AAAAAElFTkSuQmCC';
| + | |
| − | var full_screen_png = 'data:image/png;base64,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'
| + | |
| − | | + | |
| − | function window_after(win) {
| + | |
| − | function window1_after() {
| + | |
| − | | + | |
| − | };
| + | |
| − | function window2_after() {
| + | |
| − | | + | |
| − | };
| + | |
| − | function window3_after() {
| + | |
| − | | + | |
| − | };
| + | |
| − | function window4_after() {
| + | |
| − | var window_content = win.children('.window-content');
| + | |
| − | if (window_content.width() / window_content.height() > 4 / 3) {
| + | |
| − | $('#wowslider-wrapper').height(window_content.height())
| + | |
| − | $('#wowslider-wrapper').width(window_content.height() / 3 * 4)
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $('#wowslider-wrapper').width(window_content.width())
| + | |
| − | $('#wowslider-wrapper').height(window_content.width() / 4 * 3)
| + | |
| − | }
| + | |
| − | | + | |
| − | };
| + | |
| − | | + | |
| − | switch(win.attr('id')) {
| + | |
| − | case "window1": window1_after();
| + | |
| − | break;
| + | |
| − | case "window2": window2_after();
| + | |
| − | break;
| + | |
| − | case "window3": window3_after();
| + | |
| − | break;
| + | |
| − | case "window4": window4_after();
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | function log(message) {
| + | |
| − | console.log(message);
| + | |
| − | }
| + | |
| − | | + | |
| − | </script>
| + | |
| − | <script>
| + | |
| − | | + | |
| − | $(function () {
| + | |
| − | $('.window-placeholder img').attr('src', full_screen_png);
| + | |
| − | | + | |
| − | calibrate_ruler();
| + | |
| − | $(window).resize(calibrate_ruler)
| + | |
| − | | + | |
| − | function open(win) {
| + | |
| − | win.children('.window-placeholder').children('img').attr('src', exit_full_screen_png);
| + | |
| − | win.children('.window-content').show();
| + | |
| − | win.css('opacity', 0);
| + | |
| − | win.animate({
| + | |
| − | width: '94vw',
| + | |
| − | height: 100*vh-4*vw-18,
| + | |
| − | opacity:1,
| + | |
| − | }, 2000, function () {
| + | |
| − | window_after(win);
| + | |
| − | });
| + | |
| − | }
| + | |
| − | function close(win) {
| + | |
| − | win.animate({
| + | |
| − | width: '4vw',
| + | |
| − | height: '4vw',
| + | |
| − | opacity: 0,
| + | |
| − | }, 2000, function () {
| + | |
| − | win.children('.window-placeholder').children('img').attr('src', full_screen_png);
| + | |
| − | win.children('.window-content').hide();
| + | |
| − | win.css('opacity', 1);
| + | |
| − | });
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | open($('#window1'))
| + | |
| − | close($('#window1'))
| + | |
| − | setTimeout(function () { open($('#window2')); close($('#window2')) }, 4000)
| + | |
| − | setTimeout(function () { open($('#window3')); close($('#window3')) }, 8000)
| + | |
| − | setTimeout(function () { open($('#window4')); close($('#window4')) }, 12000)
| + | |
| − | setTimeout(function () { open($('#window4')) }, 17000)
| + | |
| − | | + | |
| − | $('.window-placeholder img').each(function (index, value) {
| + | |
| − | $(value).click(function () {
| + | |
| − |
| + | |
| − | if($(value).attr('src') == full_screen_png )
| + | |
| − | open($('#window' + (index+1)))
| + | |
| − | else
| + | |
| − | close($('#window' + (index + 1)))
| + | |
| − | })
| + | |
| − |
| + | |
| − | | + | |
| − | })
| + | |
| − | | + | |
| − | | + | |
| − | })
| + | |
| | </script> | | </script> |
| | </head> | | </head> |
| | <body> | | <body> |
| − | <div id="ruler" style="display:none;width:1vw;height:1vh;"></div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| − | <div>haha</div>
| + | |
| | <main> | | <main> |
| − | <div id=" window1" class="window"> | + | |
| − | <div class="window-placeholder"><img src=""></div> | + | <div class="h1"> |
| − | <div class="window-content" style="background-color:aqua">
| + | Testimonial |
| − | <div class="p" style="font-size:3rem">
| + | |
| − | Project
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div id="window2" class="window">
| + | |
| − | <div class="window-placeholder"><img src=""></div>
| + | |
| − | <div class="window-content" style="background-color:blue">
| + | |
| − | <div class="p" style="font-size:3rem">
| + | |
| − | Human Pratice
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div id="window3" class="window">
| + | |
| − | <div class="window-placeholder"><img src=""></div>
| + | |
| − | <div class="window-content" style="background-color:cyan">
| + | |
| − | <div class="p" style="font-size:3rem">
| + | |
| − | Results
| + | |
| − | </div>
| + | |
| − | | + | |
| | </div> | | </div> |
| − | </div>
| + | <div id=" carousel-demo" class=" carousel slide" data- ride=" carousel"> |
| − | <div id=" window4" class=" window" > | + | <ol class="carousel-indicators"> |
| − | <div class="window-placeholder"><img src=""></div>
| + | <li data-target="#carousel-demo" data-slide-to="0" class="active"></li> |
| − | <div class="window-content">
| + | <li data-target="#carousel-demo" data-slide-to="1"></li> |
| − | <div id="wowslider-wrapper">
| + | <li data-target="#carousel-demo" data-slide-to="2"></li> |
| − | <div id="wowslider-container1">
| + | </ol> |
| − | <div class="ws_images">
| + | <div class="carousel-inner"> |
| − | <ul>
| + | <div class="item active"> |
| − | <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--whole-group-4-3-1366.jpg" alt="Team" title="Team" id="wows1_0" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/f/fc/T--NKU_China--xiongyuxiu-4-3-1366.jpg" alt="Yuxiu Xiong" title="Yuxiu Xiong" id="wows1_1" /></li>
| + | <div class="p"> |
| − | <li><img src="https://static.igem.org/mediawiki/2016/1/19/T--NKU_China--chenchen-1366.jpg" alt="Chen Chen" title="Chen Chen" id="wows1_2" /></li>
| + | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. |
| − | <li><img src="https://static.igem.org/mediawiki/2016/3/3a/T--NKU_China--liuxiao-4-3-1366.jpg" alt="Xiao Liu" title="Xiao Liu" id="wows1_3" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/b/be/T--NKU_China--dailiangti-1366.jpg" alt="Liangti Dai" title="Liangti Dai" id="wows1_4" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/a/a6/T--NKU_China--dongzhuoer-1366.jpg" alt="Zhuoer Dong" title="Zhuoer Dong" id="wows1_5" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NKU_China--zhaoxianglin-1366.jpg" alt="Xianglin Zhao" title="Xianglin Zhao" id="wows1_6" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/4/44/T--NKU_China--mengfankang-1366.jpg" alt="Fankang Meng" title="Fankang Meng" id="wows1_7" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/f/f0/T--NKU_China--songcunjiang-1366.jpg" alt="Cunjiang Song" title="Cunjiang Song" id="wows1_8" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/4/4c/T--NKU_China--zhangmengxian-1366.jpg" alt="Mengxian Zhang" title="Mengxian Zhang" id="wows1_9" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/6/68/T--NKU_China--songxinghao-1366.jpg" alt="Xinhao Song" title="Xinhao Song" id="wows1_10" /></li> | + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/d/dc/T--NKU_China--zhangzhaoran-4-3-1366.jpg" alt="Zhaoran Zhang" title="Zhaoran Zhang" id="wows1_11" /></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/c/ca/T--NKU_China--maxinyu-1366.jpg" alt="Ma Xinyu" title="Ma Xinyu" id="wows1_12" /></li>
| + | |
| − | <li><a href="http://wowslider.com"><img src="https://static.igem.org/mediawiki/2016/1/10/T--NKU_China--qiaomingqiang-4-3-1366.jpg" alt="wowslider" title="Mingqiang Qiao" id="wows1_13" /></a></li>
| + | |
| − | <li><img src="https://static.igem.org/mediawiki/2016/1/1f/T--NKU_China--shifuchen-1366.jpg" alt="Fuchen Shi" title="Fuchen Shi" id="wows1_14" /></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div class="ws_bullets">
| + | |
| − | <div>
| + | |
| − | <a href="#" title="Team"><span>1</span></a>
| + | |
| − | <a href="#" title="Yuxiu Xiong"><span>2</span></a>
| + | |
| − | <a href="#" title="Chen Chen"><span>3</span></a>
| + | |
| − | <a href="#" title="Xiao Liu"><span>4</span></a>
| + | |
| − | <a href="#" title="Liangti Dai"><span>5</span></a>
| + | |
| − | <a href="#" title="Zhuoer Dong"><span>6</span></a>
| + | |
| − | <a href="#" title="Xianglin Zhao"><span>7</span></a>
| + | |
| − | <a href="#" title="Fankang Meng"><span>8</span></a>
| + | |
| − | <a href="#" title="Cunjiang Song"><span>9</span></a>
| + | |
| − | <a href="#" title="Mengxian Zhang"><span>10</span></a>
| + | |
| − | <a href="#" title="Xinhao Song"><span>11</span></a>
| + | |
| − | <a href="#" title="Zhaoran Zhang"><span>12</span></a>
| + | |
| − | <a href="#" title="Ma Xinyu"><span>13</span></a>
| + | |
| − | <a href="#" title="Mingqiang Qiao"><span>14</span></a>
| + | |
| − | <a href="#" title="Fuchen Shi"><span>15</span></a>
| + | |
| | </div> | | </div> |
| − | </div> | + | |
| − | <div class="ws_shadow"></div> | + | </div> |
| | + | <div class="item"> |
| | + | |
| | + | <div class="p"> |
| | + | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. |
| | + | </div> |
| | + | |
| | + | </div> |
| | + | |
| | + | |
| | + | <div class="p"> |
| | + | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. |
| | + | </div> |
| | + | |
| | </div> | | </div> |
| − | <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/wowslider?action=raw&ctype=text/javascript"></script>
| |
| − | <script type="text/javascript" src="https://2016.igem.org/Template:NKU_China/js/script/Home-team?action=raw&ctype=text/javascript"></script>
| |
| | </div> | | </div> |
| − | </div>
| + | </div> |
| | + | |
| | + | <script> |
| | + | console.log($('#carousel-demo')) |
| | + | $('#carousel-demo').carousel(); |
| | + | </script> |
| | </div> | | </div> |
| | </main> | | </main> |
