Difference between revisions of "Team:Technion Israel/Team/gallery"

Line 9: Line 9:
 
body {
 
body {
 
background-color: rgb(243, 225, 97);
 
background-color: rgb(243, 225, 97);
−
}
+
}
 +
 
 +
h1 {
 +
    font-weight: 100;
 +
    margin-bottom: 0;
 +
}
 +
 
 +
p {
 +
    margin: 0 0 16px;
 +
}
 +
 
 +
header{background-image: url("https://static.igem.org/mediawiki/2015/6/6c/Technion_Israel_2015_heading_Practices.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 300px;}
 +
header h1{ color: rgb(255, 184, 106);}
 +
 +
#label{font-style: bold; font-family: sans-serif; font-style: Arial; height: 300px; text-shadow: 2px 2px orange; line-height: 80px; width: 100%; text-align: center; vertical-align: center;}
 +
#label h1{font-size: 70px;}
 +
 
 +
.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 62: Line 306:
  
 
<div class="content">
 
<div class="content">
−
<h1 class="page_title">Gallery</h1>
+
<header>
−
<p>Page content</p>
+
<div id="label">
 +
<br><h1><b>Gallery</b></h1>
 
</div>
 
</div>
−
 
+
</header>
 +
    <div id="boximage" class="boximage">
 +
        <a title="Receiving the torch" href="https://static.igem.org/mediawiki/2015/9/98/Technion_Israel_2015_Gallery6.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/9/98/Technion_Israel_2015_Gallery6.jpg" />
 +
        </a><a title="Passing on the torch" href="https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Gallery7.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Gallery7.jpg" />
 +
        </a><a title="Tal's artistic masterpiece" href="https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_Gallery8.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_Gallery8.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">
 +
            <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img5.jpg" />
 +
        </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 alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img6.jpg" />
 +
        </a><a title="Space art-img93" href="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/normal_Space_art-1900x1200-img93.jpg">
 +
            <img alt="" src="http://universe-beauty.com/albums/userpics/2011y/04/21/1/7/thumb_Space_art-1900x1200-img93.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">
 +
            <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="Late night sushi in the lab" href="https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Gallery5.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Gallery5.jpg" />
 +
        </a><a title="Behold our beloved combs" href="https://static.igem.org/mediawiki/2015/e/ed/Technion_Israel_2015_Gallery4.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/e/ed/Technion_Israel_2015_Gallery4.jpg" />
 +
        </a><a title="Attempted Selfie" href="https://static.igem.org/mediawiki/2015/f/fa/Technion_Israel_2015_Gallery3.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/f/fa/Technion_Israel_2015_Gallery3.jpg" />
 +
        </a><a title="Just a normal day in the lab (isnt she cute?)" href="https://static.igem.org/mediawiki/2015/6/6e/Technion_Israel_2015_Gallery2.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/6/6e/Technion_Israel_2015_Gallery2.jpg" />
 +
        </a><a title="All dressed up at Adi's wedding" href="https://static.igem.org/mediawiki/2015/9/9c/Technion_Israel_2015_Gallery1.jpg">
 +
            <img alt="" src="https://static.igem.org/mediawiki/2015/9/9c/Technion_Israel_2015_Gallery1.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>
 
<footer>
 
<footer>
 
<div class="team_name">
 
<div class="team_name">
Line 85: Line 382:
 
<script type="text/javascript" src="https://2015.igem.org/Template:Technion/navbar/javascript?
 
<script type="text/javascript" src="https://2015.igem.org/Template:Technion/navbar/javascript?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
 +
<script src="js/javascript.js"></script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 10:03, 16 September 2015

Team: Technion 2015

Home
Project
Lab Notebook
Human Practices
Judging Criteria
Team

Gallery

Contact Us