|
|
| Line 1: |
Line 1: |
| - | <html> | + | <html><head> |
| | + | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| | + | |
| | + | |
| | + | <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | <style type="text/css"> |
| | + | .clear{clear:both;} |
| | | | |
| - | <style type="text/css">
| + | .carousel-container{ |
| - | .gallery .control-operator:target~.controls .control-button{color:#ccc;color:rgba(255,255,255,.4)}.gallery .control-button:first-of-type,.gallery .control-operator:nth-of-type(1):target~.controls .control-button:nth-of-type(1),.gallery .control-operator:nth-of-type(2):target~.controls .control-button:nth-of-type(2),.gallery .control-operator:nth-of-type(3):target~.controls .control-button:nth-of-type(3),.gallery .control-operator:nth-of-type(4):target~.controls .control-button:nth-of-type(4),.gallery .control-operator:nth-of-type(5):target~.controls .control-button:nth-of-type(5){color:#fff;color:rgba(255,255,255,.8)}.gallery .item:first-of-type{position:static;pointer-events:auto;opacity:1}.gallery .item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .5s}.gallery .control-operator{display:none}.gallery .control-operator:target~.item{pointer-events:none;opacity:0;animation:none}.gallery .control-operator:target~.controls .control-button{animation:none}@keyframes controlAnimation-2{0%{color:#ccc;color:rgba(255,255,255,.4)}14.3%,50%{color:#fff;color:rgba(255,255,255,.8)}64.3%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-2{0%{opacity:0}14.3%,50%{opacity:1}64.3%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.items-2.autoplay .control-button{animation:controlAnimation-2 14s infinite}.items-2.autoplay .item{animation:galleryAnimation-2 14s infinite}.items-2 .control-button:nth-of-type(1),.items-2 .item:nth-of-type(1){animation-delay:-2s}.items-2 .control-button:nth-of-type(2),.items-2 .item:nth-of-type(2){animation-delay:5s}@keyframes controlAnimation-3{0%{color:#ccc;color:rgba(255,255,255,.4)}9.5%,33.3%{color:#fff;color:rgba(255,255,255,.8)}42.9%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-3{0%{opacity:0}9.5%,33.3%{opacity:1}42.9%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.items-3.autoplay .control-button{animation:controlAnimation-3 21s infinite}.items-3.autoplay .item{animation:galleryAnimation-3 21s infinite}.items-3 .control-button:nth-of-type(1),.items-3 .item:nth-of-type(1){animation-delay:-2s}.items-3 .control-button:nth-of-type(2),.items-3 .item:nth-of-type(2){animation-delay:5s}.items-3 .control-button:nth-of-type(3),.items-3 .item:nth-of-type(3){animation-delay:12s}@keyframes controlAnimation-4{0%{color:#ccc;color:rgba(255,255,255,.4)}7.1%,25%{color:#fff;color:rgba(255,255,255,.8)}32.1%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-4{0%{opacity:0}7.1%,25%{opacity:1}32.1%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(4):target~.item:nth-of-type(4){pointer-events:auto;opacity:1}.items-4.autoplay .control-button{animation:controlAnimation-4 28s infinite}.items-4.autoplay .item{animation:galleryAnimation-4 28s infinite}.items-4 .control-button:nth-of-type(1),.items-4 .item:nth-of-type(1){animation-delay:-2s}.items-4 .control-button:nth-of-type(2),.items-4 .item:nth-of-type(2){animation-delay:5s}.items-4 .control-button:nth-of-type(3),.items-4 .item:nth-of-type(3){animation-delay:12s}.items-4 .control-button:nth-of-type(4),.items-4 .item:nth-of-type(4){animation-delay:19s}@keyframes controlAnimation-5{0%{color:#ccc;color:rgba(255,255,255,.4)}5.7%,20%{color:#fff;color:rgba(255,255,255,.8)}25.7%,100%{color:#ccc;color:rgba(255,255,255,.4)}}@keyframes galleryAnimation-5{0%{opacity:0}5.7%,20%{opacity:1}25.7%,100%{opacity:0}}.gallery .control-operator:nth-of-type(1):target~.item:nth-of-type(1){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(2):target~.item:nth-of-type(2){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(3):target~.item:nth-of-type(3){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(4):target~.item:nth-of-type(4){pointer-events:auto;opacity:1}.gallery .control-operator:nth-of-type(5):target~.item:nth-of-type(5){pointer-events:auto;opacity:1}.items-5.autoplay .control-button{animation:controlAnimation-5 35s infinite}.items-5.autoplay .item{animation:galleryAnimation-5 35s infinite}.items-5 .control-button:nth-of-type(1),.items-5 .item:nth-of-type(1){animation-delay:-2s}.items-5 .control-button:nth-of-type(2),.items-5 .item:nth-of-type(2){animation-delay:5s}.items-5 .control-button:nth-of-type(3),.items-5 .item:nth-of-type(3){animation-delay:12s}.items-5 .control-button:nth-of-type(4),.items-5 .item:nth-of-type(4){animation-delay:19s}.items-5 .control-button:nth-of-type(5),.items-5 .item:nth-of-type(5){animation-delay:26s} | + | width: 600px; |
| - | | + | height: 360px; |
| - | .gallery .control-button {
| + | float: left; |
| - | color: #ccc;
| + | margin: 0; |
| - | color: rgba(255, 255, 255, 0.4);
| + | padding: 0; |
| | + | position: relative; |
| | + | overflow: hidden; |
| | } | | } |
| | | | |
| - | .gallery .control-button:hover {
| |
| - | color: white;
| |
| - | color: rgba(255, 255, 255, 0.8);
| |
| - | }
| |
| | | | |
| - | /*
| + | .right-arrow{ |
| - | Theme controls how everything looks in Gallery CSS. | + | width: 60px; |
| - | */
| + | height: 100%; |
| - | .gallery { | + | background-color: rgba(0,0,0,.5); |
| - | position: relative;
| + | position: absolute; |
| - | } | + | right: 0; |
| - | .gallery .item { | + | margin: 0; |
| - | overflow: hidden;
| + | padding: 0; |
| - | background: #4d87e2;
| + | z-index: 2; |
| | + | } |
| | + | |
| | + | .left-arrow{ |
| | + | width: 60px; |
| | + | height: 100%; |
| | + | background-color: rgba(0,0,0,.5); |
| | + | position: absolute; |
| | + | left: 0; |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | z-index: 2; |
| | + | } |
| | + | .carousel-image-holder{ |
| | + | height:360px; |
| | + | width: 2400px; |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | position: absolute; |
| | + | z-index: 1; |
| | + | } |
| | + | |
| | + | .carousel-image-holder img{ |
| | + | width: 600px; |
| | + | float: left; |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | display: inline-block; |
| | + | } |
| | + | |
| | + | .carousel-buttons-container{ |
| | + | width: 600px; |
| | + | text-align: center; |
| | + | margin: 15px 0 0 0; |
| | + | padding: 0; |
| | + | } |
| | + | |
| | + | .carousel-buttons-container ul{ |
| | + | list-style-type: none; |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | } |
| | + | |
| | + | .carousel-buttons{ |
| | + | background-color: #dddddd; |
| | + | height: 18px; |
| | + | width: 18px; |
| | + | border-radius: 50%; |
| | + | display: inline-block; |
| | + | margin: 0 10px 0 0; |
| | + | padding: 0; |
| | + | cursor: pointer; |
| | + | } |
| | + | |
| | + | .carousel-buttons:last-of-type{ |
| | + | margin: 0; |
| | + | } |
| | + | |
| | + | .active{ |
| | + | background-color: #e67e22; |
| | + | } |
| | + | |
| | + | </style> |
| | + | |
| | + | |
| | + | |
| | + | <script type="text/javascript">//<![CDATA[ |
| | + | $(window).load(function(){ |
| | + | $(".left-arrow").hide(); |
| | + | var numImgs = $('div.carousel-image-holder img').length; |
| | + | |
| | + | var addId = numImgs; |
| | + | |
| | + | |
| | + | |
| | + | if(numImgs == 2){ |
| | + | var clicked = 0; |
| | + | imgCount = numImgs-2; |
| | + | }else if(numImgs <= 1){ |
| | + | $(".right-arrow").hide(); |
| | + | }else{ |
| | + | var clicked = 1; |
| | + | imgCount = numImgs-1; |
| | + | } |
| | + | if(numImgs > 2){ |
| | + | for (var i=0; i<numImgs; i++){ |
| | + | $("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>'); |
| | + | var addId = addId - 1; |
| | } | | } |
| - | .gallery .controls {
| + | }else{ |
| - | position: absolute;
| + | |
| - | bottom: 0;
| + | |
| - | width: 100%;
| + | |
| - | text-align: center;
| + | |
| - | } | + | |
| - | .gallery .control-button {
| + | |
| - | display: inline-block;
| + | |
| - | margin: 0 .02em;
| + | |
| - | font-size: 3em;
| + | |
| - | text-align: center;
| + | |
| - | text-decoration: none;
| + | |
| - | transition: color .1s;
| + | |
| | } | | } |
| | | | |
| | | | |
| | + | $(".carousel-buttons").click(function(){ |
| | + | |
| | + | var findIdClicked = $(this).attr("id"); |
| | + | |
| | + | var splitString = findIdClicked.split("carousel") |
| | + | var findTheNumb = splitString[1]; |
| | | | |
| - | </style>
| + | $(".carousel-buttons").removeClass("active"); |
| | + | $(this).addClass("active"); |
| | + | clicked = parseInt(findTheNumb); |
| | + | var adjustNumberforSlide = findTheNumb-1; |
| | + | |
| | + | $(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"}); |
| | + | console.log(clicked); |
| | + | |
| | + | if(findTheNumb == 1){ |
| | + | $(".left-arrow").hide(); |
| | + | $(".right-arrow").show(); |
| | + | }else if (findTheNumb == numImgs){ |
| | + | $(".right-arrow").hide(); |
| | + | $(".left-arrow").show(); |
| | + | }else{ |
| | + | $(".right-arrow").show(); |
| | + | $(".left-arrow").show(); |
| | + | } |
| | + | }); |
| | | | |
| | | | |
| - | <div class="gallery items-3">
| + | $(".carousel-buttons-container").find("li").first().addClass("active"); |
| - | <div id="item-1" class="control-operator"></div>
| + | |
| - | <div id="item-2" class="control-operator"></div>
| + | |
| - | <div id="item-3" class="control-operator"></div>
| + | |
| | | | |
| - | <figure class="item"></html>{{Team:Aachen/Figure|Aachen_MammoMatrixMasks2.png|title=Cut Lines|subtitle=This MammoMatrix mask can be lasercut and placed below a 384-well plate.|width=350px}}<html></figure>
| + | |
| | + | $(".right-arrow").click(function(){ |
| | + | |
| | + | if (clicked < imgCount){ |
| | + | |
| | + | $(".carousel-image-holder").animate({"left": "-=600px"}); |
| | + | |
| | + | |
| | + | console.log(clicked); |
| | + | }else{ |
| | + | $(".carousel-image-holder").animate({"left": "-=600px"}); |
| | + | $(".right-arrow").hide(); |
| | | | |
| - | <figure class="item"></html>{{Team:Aachen/Figure|Aachen_DataMatrixMaskDesigner.png|title=Making a datamatrix mask|subtitle=Upon entering a string, the software predicts if the datamatrix will fit into a 384-well plate.|width=350px}}<html></figure>
| + | console.log(clicked); |
| | + | } |
| | | | |
| - | <figure class="item"></html>{{Team:Aachen/Figure|Aachen_MammoMatrixMasks2.png|title=Cut Lines|subtitle=This MammoMatrix mask can be lasercut and placed below a 384-well plate.|width=350px}}<html></figure>
| + | clicked = clicked+1; |
| | + | $(".left-arrow").show(); |
| | + | $(".carousel-buttons").removeClass("active"); |
| | + | $("#carousel"+clicked).addClass("active"); |
| | + | |
| | + | }); |
| | | | |
| - | <div class="controls"> | + | $(".left-arrow").click(function(){ |
| - | <a href="#item-1" class="control-button">●</a>
| + | |
| - | <a href="#item-2" class="control-button">●</a> | + | if (clicked > 2){ |
| - | <a href="#item-3" class="control-button">●</a>
| + | |
| - | </div>
| + | $(".carousel-image-holder").animate({"left": "+=600px"}); |
| | + | |
| | + | console.log(clicked); |
| | + | }else{ |
| | + | $(".carousel-image-holder").animate({"left": "+=600px"}); |
| | + | $(".left-arrow").hide(); |
| | + | |
| | + | console.log(clicked); |
| | + | } |
| | + | |
| | + | $(".right-arrow").show(); |
| | + | clicked = clicked-1; |
| | + | $(".carousel-buttons").removeClass("active"); |
| | + | $("#carousel"+clicked).addClass("active"); |
| | + | |
| | + | |
| | + | }); |
| | + | |
| | + | });//]]> |
| | + | |
| | + | </script> |
| | + | |
| | + | |
| | + | </head> |
| | + | <body> |
| | + | <div class="carousel-container"> |
| | + | <div style="display: none;" class="left-arrow"></div> |
| | + | <div style="display: block;" class="right-arrow"></div> |
| | + | <div style="left: 0px;" class="carousel-image-holder"> |
| | + | <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"> |
| | + | <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"> |
| | + | <img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg"> |
| | + | <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"> |
| | + | </div> |
| | </div> | | </div> |
| - | <div class="gallery autoplay items-3"> | + | <div class="clear"></div> |
| | + | <div class="carousel-buttons-container"> |
| | + | <ul><li class="carousel-buttons active" id="carousel1"></li><li class="carousel-buttons" id="carousel2"></li><li class="carousel- |
| | + | |
| | + | buttons" id="carousel3"></li><li class="carousel-buttons" id="carousel4"></li> |
| | + | |
| | + | </ul> |
| | + | </div> |
| | + | |
| | + | |
| | + | |
| | + | |
| | + | |
| | | | |
| - | </html> | + | </body></html> |
"
