|
|
| Line 27: |
Line 27: |
| | | | |
| | #label h1{font-size: 80px;} | | #label h1{font-size: 80px;} |
| | + | .img_wrapper{text-align: center; width: 100%; display: block;} |
| | | | |
| − | .boximage > a {
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | text-decoration: none;
| |
| − | vertical-align: bottom;
| |
| − | width: 16.66%;
| |
| − | }
| |
| | | | |
| − | .boximage > a > img {
| |
| − | border: none;
| |
| − | display: block;
| |
| − | height: auto;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .arrow::after {
| |
| − | border: 10px solid #333;
| |
| − | content: "";
| |
| − | left: 50%;
| |
| − | position: absolute;
| |
| − | transform: translate(-10px, -10px) rotate(45deg);
| |
| − | }
| |
| − |
| |
| − | .box {
| |
| − | background: #333;
| |
| − | float: left;
| |
| − | padding: 13px 0;
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .js-boxloading::before {
| |
| − | content: "Loading...";
| |
| − | left: 0;
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | top: 50%;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .box > div {
| |
| − | color: #9c9c9c;
| |
| − | padding: 0 13px 8px;
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .box > img {
| |
| − | max-height: 420px;
| |
| − | max-width: 100%;
| |
| − | position: relative;
| |
| − | vertical-align: bottom;
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 480px) and (max-width: 919px) {
| |
| − | body {
| |
| − | width: 95%;
| |
| − | }
| |
| − |
| |
| − | .boximage > a {
| |
| − | width: 20%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 479px) {
| |
| − | body {
| |
| − | width: 95%;
| |
| − | }
| |
| − |
| |
| − | .boximage > a {
| |
| − | width: 33.33%;
| |
| − | }
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| − | <script>
| |
| − | (function () {
| |
| − | 'use strict';
| |
| − | ////////////////////////////////////////////////////////////////////////////////
| |
| − | // Get Next Element Sibling, Get Last Element Sibling
| |
| − |
| |
| − | function getnextElementSibling(element) {
| |
| − | if (element.nextElementSibling) {
| |
| − | return element.nextElementSibling;
| |
| − | }
| |
| − |
| |
| − | var current = element.nextSibling;
| |
| − | while (current && current.nodeType !== 1) {
| |
| − | current = current.nextSibling;
| |
| − | }
| |
| − | return current;
| |
| − | }
| |
| − |
| |
| − | function getpreviousElementSibling(element) {
| |
| − | if (element.previousElementSibling) {
| |
| − | return element.previousElementSibling;
| |
| − | }
| |
| − |
| |
| − | var current = element.previousSibling;
| |
| − | while (current && current.nodeType !== 1) {
| |
| − | current = current.previousSibling;
| |
| − | }
| |
| − | return current;
| |
| − | }
| |
| − |
| |
| − | ////////////////////////////////////////////////////////////////////////////////
| |
| − | // Class List functions
| |
| − |
| |
| − | function addClass(element, string) {
| |
| − | if (element.classList) {
| |
| − | return element.classList.add(string);
| |
| − | }
| |
| − |
| |
| − | var list = element.className.split(' '),
| |
| − | i,
| |
| − | notpresent = true;
| |
| − |
| |
| − | for (i = 0; i < list.length; i++) {
| |
| − | if (list[i] === string) {
| |
| − | notpresent = false;
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | if (notpresent) {
| |
| − | element.className += (element.className ? ' ' : '') + string;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function removeClass(element, string) {
| |
| − | if (element.classList) {
| |
| − | return element.classList.remove(string);
| |
| − | }
| |
| − |
| |
| − | var list = element.className.split(' '),
| |
| − | i;
| |
| − |
| |
| − | element.className = '';
| |
| − |
| |
| − | for (i = 0; i < list.length; i++) {
| |
| − | if (list[i] !== string) {
| |
| − | element.className += (element.className ? ' ' : '') + list[i];
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function containsClass(element, string) {
| |
| − | if (element.classList) {
| |
| − | return element.classList.contains(string);
| |
| − | }
| |
| − |
| |
| − | var list = element.className.split(' '),
| |
| − | i,
| |
| − | present = false;
| |
| − |
| |
| − | for (i = 0; i < list.length; i++) {
| |
| − | if (list[i] === string) {
| |
| − | present = true;
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | return present;
| |
| − | }
| |
| − |
| |
| − | ////////////////////////////////////////////////////////////////////////////////
| |
| − | // Image gallery
| |
| − |
| |
| − | function boximage(idboximage, classbox, classactive) {
| |
| − | var list, i,
| |
| − | box = document.createElement('div'),
| |
| − | boxloading = 'js-boxloading';
| |
| − | box.className = classbox;
| |
| − |
| |
| − | list = document.getElementById(idboximage).getElementsByTagName('a');
| |
| − | i = list.length;
| |
| − | while (i--) {
| |
| − | list[i].onclick = function () {
| |
| − |
| |
| − | removeClass(this, classactive);
| |
| − |
| |
| − | if (containsClass(getnextElementSibling(this), classbox)) {
| |
| − |
| |
| − | box.parentNode.removeChild(box);
| |
| − |
| |
| − | } else {
| |
| − |
| |
| − | if ((box.parentNode !== null) && (box.parentNode.nodeName !== '#document-fragment')) {
| |
| − | removeClass(getpreviousElementSibling(box), classactive);
| |
| − | }
| |
| − | addClass(this, classactive);
| |
| − |
| |
| − | removeClass(box, boxloading);
| |
| − |
| |
| − | box.innerHTML = '<div>' + this.getAttribute('title') + '</div><img src="' + this.getAttribute('href') + '">';
| |
| − |
| |
| − | setTimeout(function () {
| |
| − | addClass(box, boxloading);
| |
| − | }, 500);
| |
| − |
| |
| − | this.parentNode.insertBefore(box, getnextElementSibling(this));
| |
| − |
| |
| − | var this_height = this.getBoundingClientRect().height,
| |
| − | box_height = box.getBoundingClientRect().height,
| |
| − | box_bottom = box.getBoundingClientRect().bottom,
| |
| − | client_height = document.documentElement.clientHeight;
| |
| − |
| |
| − | if ((this.getBoundingClientRect().top < 0) || ((box_bottom > client_height) && ((this_height + box_height) > client_height))) {
| |
| − | this.scrollIntoView();
| |
| − | } else if ((box_bottom > client_height) && ((this_height + box_height) < client_height)) {
| |
| − | box.scrollIntoView(false);
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | var e = event || window.event;
| |
| − | if (e.preventDefault) {
| |
| − | e.preventDefault();
| |
| − | } else {
| |
| − | return false;
| |
| − | }
| |
| − | };
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | boximage('boximage', 'box', 'arrow');
| |
| − |
| |
| − | }());
| |
| − |
| |
| − | </script>
| |
| | <title>Team: Technion 2015</title> | | <title>Team: Technion 2015</title> |
| | </head> | | </head> |
| Line 322: |
Line 97: |
| | | | |
| | <div class="content"> | | <div class="content"> |
| − | | + | <div class="img_wrapper"> |
| − | <div id="boximage" class=" boximage"> | + | <img src="https://static.igem.org/mediawiki/2015/5/55/Technion_Israel_2015_collage1.jpg" /> |
| − | <a title="Receiving the torch" href="https://static.igem.org/mediawiki/2015/9/98/Technion_Israel_2015_Gallery6.jpg">
| + | </div> |
| − | <img alt="" src ="https://static.igem.org/mediawiki/2015/9/98/Technion_Israel_2015_Gallery6.jpg" /> | + | <div class="img_wrapper"> |
| − | </a><a title="Passing on the torch" href="https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Gallery7.jpg">
| + | <img src="https://static.igem.org/mediawiki/2015/7/71/Technion_Israel_2015_collage2.jpg" /> |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Gallery7.jpg" />
| + | </div> |
| − | </a><a title="Tal's artistic masterpiece" href="https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_Gallery8.jpg">
| + | <div class="img_wrapper"> |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_Gallery8.jpg" />
| + | <img src="https://static.igem.org/mediawiki/2015/e/e4/Technion_Israel_2015_collage3.jpg" /> |
| − | </a><a title="Space art-img5" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img5.jpg">
| + | </div> |
| − | <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img5.jpg" />
| + | <div class="img_wrapper"> |
| − | </a><a title="Space art-img6" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img6.jpg">
| + | <img src="https://static.igem.org/mediawiki/2015/e/ef/Technion_Israel_2015_collage4.jpg" /> |
| − | <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img6.jpg" />
| + | </div> |
| − | </a><a title="Space art-img93" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img93.jpg">
| + | <div class="img_wrapper"> |
| − | <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img93.jpg" />
| + | <img src="https://static.igem.org/mediawiki/2015/5/55/Technion_Israel_2015_collage5.jpg" /> |
| − | </a><a title="Space art-img177" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img177.jpg">
| + | </div> |
| − | <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img177.jpg" />
| + | |
| − | </a><a title="Space art-img170" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img170.jpg">
| + | |
| − | <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img170.jpg" />
| + | |
| − | </a><a title="Behold our beloved combs" href="https://static.igem.org/mediawiki/2015/5/56/Technion_Israel_2015_gallery2.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/5/56/Technion_Israel_2015_gallery2.jpg" />
| + | |
| − | </a><a title="Attempted Selfie" href="https://static.igem.org/mediawiki/2015/2/27/Technion_Israel_2015_gallery1.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/2/27/Technion_Israel_2015_gallery1.jpg" />
| + | |
| − | </a><a title="All dressed up at Adi's wedding" href="https://static.igem.org/mediawiki/2015/7/72/Technion_Israel_2015_gallery4.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/7/ 72/ Technion_Israel_2015_gallery4.jpg" /> | + | |
| − | </a><a title="Look at our glycerol stock :D" href="https://static.igem.org/mediawiki/2015/8/83/Technion_Israel_2015_aboutus2.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/8/83/Technion_Israel_2015_aboutus2.jpg" />
| + | |
| − | </a><a title="Goofing off in the lab" href="https://static.igem.org/mediawiki/2015/4/48/Technion_Israel_2015_aboutus3.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/ 4/ 48/ Technion_Israel_2015_aboutus3.jpg" /> | + | |
| − | </a><a title="Group outing to the Ramat Hanadiv Gardens and Tishbi winery" href="https://static.igem.org/mediawiki/2015/3/3d/Technion_Israel_2015_aboutus5.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/3/3d/Technion_Israel_2015_aboutus5.jpg" />
| + | |
| − | </a><a title="Group bonfire bonding night" href="https://static.igem.org/mediawiki/2015/6/6b/Technion_Israel_2015_aboutus6.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/ 6/ 6b/ Technion_Israel_2015_aboutus6.jpg" /> | + | |
| − | </a><a title="" href="https://static.igem.org/mediawiki/2015/a/a6/Technion_Israel_2015_aboutus7.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/a/a6/Technion_Israel_2015_aboutus7.jpg" />
| + | |
| − | </a><a title="Team toast at Adi's wedding" href="https://static.igem.org/mediawiki/2015/2/2f/Technion_Israel_2015_aboutus18.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/ 2/ 2f/ Technion_Israel_2015_aboutus18.jpg" /> | + | |
| − | </a><a title="We were on the radio!" href="https://static.igem.org/mediawiki/2015/2/23/Technion_Israel_2015_aboutus22.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/2/23/Technion_Israel_2015_aboutus22.jpg" />
| + | |
| − | </a><a title="Giving back (with all our hearts ;-p)" href="https://static.igem.org/mediawiki/2015/d/d5/Technion_Israel_2015_aboutus24.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/d/d5/Technion_Israel_2015_aboutus24.jpg" />
| + | |
| − | </a><a title="Planning the Mini-Jamboree" href="https://static.igem.org/mediawiki/2015/1/1a/Technion_Israel_2015_aboutus25.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/1/1a/Technion_Israel_2015_aboutus25.jpg" />
| + | |
| − | </a><a title="Working hard and playing hard" href="https://static.igem.org/mediawiki/2015/e/e2/Technion_Israel_2015_aboutus26.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/e/e2/Technion_Israel_2015_aboutus26.jpg" />
| + | |
| − | </a><a title="Hard at work" href="https://static.igem.org/mediawiki/2015/6/67/Technion_Israel_2015_aboutus27.jpg">
| + | |
| − | <img alt="" src="https://static.igem.org/mediawiki/2015/6/67/Technion_Israel_2015_aboutus27.jpg" />
| + | |
| − | </a><div class="clear"></div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | <footer> | | <footer> |
