Difference between revisions of "Team:Tuebingen/galleryTest"

 
(14 intermediate revisions by the same user not shown)
Line 613: Line 613:
 
}
 
}
  
−
div img {
+
.gallery div img {
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
Line 622: Line 622:
 
}
 
}
 
@media only screen and (max-width: 600px) {
 
@media only screen and (max-width: 600px) {
−
     div img {
+
     .gallery div img {
 
         width: 100%;
 
         width: 100%;
 
   max-width: 400px;
 
   max-width: 400px;
Line 629: Line 629:
 
}
 
}
  
−
div.show::before {
+
.gallery div.show::before {
 
content: '';
 
content: '';
 
display: block;
 
display: block;
Line 640: Line 640:
 
}
 
}
  
−
div.show img {
+
.gallery div.show img {
 
position: fixed;
 
position: fixed;
 
top: 0; left: 0;
 
top: 0; left: 0;
Line 653: Line 653:
 
}
 
}
  
−
div:not(.show):hover img {
+
.gallery div:not(.show):hover img {
 
cursor: pointer;
 
cursor: pointer;
 
transform: scale(1.3);
 
transform: scale(1.3);
Line 672: Line 672:
 
}
 
}
  
−
.active div:not(.show) img {
+
.gallery .active div:not(.show) img {
 
filter: blur(3px);
 
filter: blur(3px);
 +
}
 +
.test3{
 +
    background: url("https://2019.igem.org/wiki/images/e/ee/T--Tuebingen--gallery_bg.png");
 +
    background-attachment: fixed;
 +
    background-size: 100% auto;
 +
    background-repeat: no-repeat;
 
}
 
}
 
</style>
 
</style>
Line 679: Line 685:
  
 
<section id="nav-placeholder">
 
<section id="nav-placeholder">
−
        <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top" style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
−
            <a class="navbar-brand" href="http://2018.igem.org/Team:Munich">
+
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
−
                <img src="http://2018.igem.org/wiki/images/9/92/T--Munich--logo.png" alt="logo" style="width:40px;">
+
        <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
−
                <h5 class="d-inline ml-3">Phactory</h5>
+
            <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
−
            </a>
+
                style="width:70px;">
−
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+
            <h5 class="d-inline ml-3">GLP.exe</h5>
−
                <span class="navbar-toggler-icon"></span>
+
        </a>
−
            </button>
+
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
−
            <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
+
            <span class="navbar-toggler-icon"></span>
−
                <ul class="navbar-nav">
+
        </button>
−
                    <li id="homeButton" class="nav-item mx-3">
+
        <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
−
                        <a class="nav-link" href="http://2018.igem.org/Team:Munich">HOME</a>
+
            <ul class="navbar-nav">
−
                    </li>
+
                <li id="homeButton" class="nav-item mx-3">
−
                    <li class="nav-item dropdown mx-3">
+
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen">HOME</a>
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
                </li>
−
                            TEAM
+
                <li id="ourStoryButton" class="nav-item mx-3">
−
                        </a>
+
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/story">OUR STORY</a>
−
                        <div class="dropdown-menu">
+
                </li>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Team">Team Members</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Collaborations">Collaborations</a>
+
  
−
  <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Sponsors">Sponsors</a>
+
                <li class="nav-item dropdown mx-3">
−
<a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Attributions">Attributions</a>
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
−
                         </div>
+
                        PROJECT
−
                    </li>
+
                    </a>
−
                    <li class="nav-item dropdown mx-3">
+
                    <div class="dropdown-menu">
−
                         <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/description">Description</a>
−
                            PROJECT
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/incretin">Incretin</a>
−
                        </a>
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/kill_switch">Kill Switch</a>
−
                         <div class="dropdown-menu">
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/cpp">Cell Penetrating Peptides</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Description">Description</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/nissle">Nissle</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Design">Design</a>
+
                         <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/model">Model</a>
−
          <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Notebook">Notebook</a>
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/software">Software</a>
−
<a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Protocols">Protocols</a>
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/notebook">Notebook</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/InterLab">InterLab</a>
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/results">Results</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Model">Model</a>
+
                        <a class="dropdown-item" href="2019.igem.org/Team:Tuebingen/demonstrate">Demonstrate</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Results">Results</a>
+
                    </div>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Demonstrate">Demonstrate</a>
+
                </li>
 +
                <li class="nav-item dropdown mx-3">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
 +
                        PARTS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_overview">Parts Overview</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_basic">Basic Parts</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_improved">Improved Parts</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/parts_composite">Composite Parts</a>
 +
                    </div>
 +
                </li>
  
 +
                <li class="nav-item mx-3">
 +
                    <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/safety">SAFETY</a>
 +
                </li>
  
−
                        </div>
+
                <li class="nav-item dropdown mx-3">
−
                    </li>
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
−
                    <li class="nav-item dropdown mx-3">
+
                         PEOPLE
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
                    </a>
−
                            PARTS
+
                    <div class="dropdown-menu">
−
                         </a>
+
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/team">Team</a>
−
                        <div class="dropdown-menu">
+
                        <a class="dropdown-item"
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Parts">Parts Overview</a>
+
                          href="https://2019.igem.org/Team:Tuebingen/collaborations">Collaborations</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Basic_Part">Basic Parts</a>
+
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/attributions">Attributions</a>
−
<a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Improve">Improved Parts</a>
+
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/sponsors">Sponsors</a>
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Composite_Part">Composite Parts</a>
+
                         <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/for_judges">For Judges</a>
−
                         </div>
+
                     </div>
−
                     </li>
+
                </li>
  
−
                    <li class="nav-item mx-3">
+
                <li class="nav-item dropdown mx-3">
−
                         <a class="nav-link" href="http://2018.igem.org/Team:Munich/Safety">SAFETY</a>
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
−
                     </li>
+
                         HUMAN PRACTICES
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/hp_overview">Overview</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/education">Educational Outreach</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/experts">Experts</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/sdg">UN Sustainable Development Goals</a>
 +
                    </div>
 +
                </li>
 +
                <li class="nav-item dropdown mx-3">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
 +
                        AWARDS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/entrepreneurship">Entrepreneurship</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/measurement">Measurement</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/model">Model</a>
 +
                        <a class="dropdown-item" href="https://2019.igem.org/Team:Tuebingen/software">Software</a>
 +
                     </div>
 +
                </li>
  
−
                    <li class="nav-item dropdown mx-3">
+
                <li class="nav-item mx-3">
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
                     <a class="nav-link" href="https://2019.igem.org/Team:Tuebingen/gallery" target="_blank">GALLERY</a>
−
                            HUMAN PRACTICES
+
                </li>
−
                        </a>
+
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Human_Practices">Human Practices</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Public_Engagement">Education &amp; Engagement</a>
+
−
<a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Oracoli">Oracoli</a>
+
−
<a class="dropdown-item" href="http://2018.igem.org/Team:Munich/European_Meetup">European Meetup</a>
+
−
                        </div>
+
−
                     </li>
+
−
                    <li class="nav-item dropdown mx-3">
+
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+
−
                            AWARDS
+
−
                        </a>
+
−
                        <div class="dropdown-menu">
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Applied_Design">Applied Design</a>
+
−
                          <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Entrepreneurship">Entrepreneurship</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Hardware">Hardware</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Measurement">Measurement</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Model">Model</a>
+
−
                            <a class="dropdown-item" href="http://2018.igem.org/Team:Munich/Software">Software</a>
+
−
                        </div>
+
−
                    </li>
+
−
                    <li class="nav-item mx-3">
+
−
                        <a class="nav-link" href="http://igem.org/2018_Judging_Form?team=Munich" target="_blank">JUDGING FORM ⇗</a>
+
−
                    </li>
+
−
                    <li class="nav-item mx-1 pt-2">
+
−
                        <a href="https://www.facebook.com/Munich.iGEM/" class="fa fa-facebook" target="_blank"></a>
+
−
                    </li>
+
−
                    <li class="nav-item mx-1 pt-2">
+
−
                        <a href="https://twitter.com/iGEM_Munich" class="fa fa-twitter" target="_blank"></a>
+
−
                    </li>
+
  
 +
                <li class="nav-item mx-3">
 +
                    <a class="nav-link" href="http://igem.org/2018_Judging_Form?team=Munich" target="_blank">JUDGING
 +
                        FORM ⇗</a>
 +
                </li>
  
−
                 </ul>
+
                 <li class="nav-item mx-1 pt-2">
−
             </div>
+
                    <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
−
         </nav>
+
                </li>
−
     </section>
+
                <li class="nav-item mx-1 pt-2">
 +
                    <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
 +
                </li>
 +
 
 +
             </ul>
 +
         </div>
 +
     </nav>
 +
</section>
 
<script>
 
<script>
 
     var url = window.location.href;
 
     var url = window.location.href;
Line 799: Line 817:
 
<a href="#" class="next">&gt;</a>
 
<a href="#" class="next">&gt;</a>
 
<main class="container gallery">
 
<main class="container gallery">
−
<div><img src="https://picsum.photos/id/21/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/21/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/22/800/1000" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/22/800/1000" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/23/1400/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/23/1400/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/24/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/24/800" alt=""></div>
 
<div><img src="https://picsumhttps://picsum.photos/id/25/800.photos/id/25/800" alt=""></div>
 
<div><img src="https://picsumhttps://picsum.photos/id/25/800.photos/id/25/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/26/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/26/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/27/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/27/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/28/800" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/28/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/29/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/29/800" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/10/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/10/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/11/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/11/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/12/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/12/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/13/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/13/800" alt=""></div>
−
<div class="horizontal"><img src="https://picsum.photos/id/14/800" alt=""></div>
+
<div class="test horizontal"><img src="https://picsum.photos/id/14/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/15/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/15/800" alt=""></div>
−
<div class="big"><img src="https://picsum.photos/id/16/800" alt=""></div>
+
<div class="test big"><img src="https://picsum.photos/id/16/800" alt=""></div>
−
<div><img src="https://picsum.photos/id/17/800" alt=""></div>
+
<div class="test"><img src="https://picsum.photos/id/17/800" alt=""></div>
−
<div class="vertical"><img src="https://picsum.photos/id/18/800" alt=""></div>
+
<div class="test vertical"><img src="https://picsum.photos/id/18/800" alt=""></div>
 
</main>
 
</main>
 +
  
 
<script>
 
<script>
 
     // TODO: touch events
 
     // TODO: touch events
  
−
const divs = document.querySelectorAll('div');
+
const divs = document.querySelectorAll('div.test');
−
const body = document.body;
+
const body = document.querySelector('body');
 
const prev = document.querySelector('.prev');
 
const prev = document.querySelector('.prev');
 
const next = document.querySelector('.next');
 
const next = document.querySelector('.next');
  
−
checkPrev = () => document.querySelector('div:first-child').classList.contains('show') ? prev.style.display = 'none' : prev.style.display = 'flex';
+
checkPrev = () => document.querySelector('div.test:first-child').classList.contains('show') ? prev.style.display = 'none' : prev.style.display = 'flex';
  
−
checkNext = () => document.querySelector('div:last-child').classList.contains('show') ? next.style.display = 'none' : next.style.display = 'flex';
+
checkNext = () => document.querySelector('div.test:last-child').classList.contains('show') ? next.style.display = 'none' : next.style.display = 'flex';
  
 
Array.prototype.slice.call(divs).forEach(function (el) {
 
Array.prototype.slice.call(divs).forEach(function (el) {

Latest revision as of 14:37, 5 October 2019

Gallery

hallo123

hallo123

hallo123