Difference between revisions of "Team:SVCE Chennai/Gallery"

 
(10 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/flatly/bootstrap.css"/>
 
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/flatly/bootstrap.css"/>
  
−
 
+
<link rel="stylesheet" type="text/css" href="http://vodkabears.github.io/galereya/css/jquery.galereya.css" />
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:SVCE_Chennai/CSS?action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:SVCE_Chennai/CSS?action=raw&ctype=text/css" />
  
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 +
  
 
<nav class="navBarIGEM navbar navbar-default navbar-fixed-top">
 
<nav class="navBarIGEM navbar navbar-default navbar-fixed-top">
Line 21: Line 22:
 
<span class="icon-bar"></span>
 
<span class="icon-bar"></span>
 
</button>
 
</button>
−
<a class="navbar-brand" href="#" style="padding-top:0px;"><img src="https://static.igem.org/mediawiki/2015/2/25/MainLogo_Title.png" class="teamLogo"></a>
+
<a class="navbar-brand" href="https://2015.igem.org/Team:SVCE_Chennai" style="padding-top:0px;"><img src="https://static.igem.org/mediawiki/2015/2/25/MainLogo_Title.png" class="teamLogo" style="    padding-left: 15px;"></a>
 
</div>
 
</div>
 
 
Line 27: Line 28:
 
<div class="collapse navbar-collapse js-navbar-collapse">
 
<div class="collapse navbar-collapse js-navbar-collapse">
 
<ul id="sdt_menu" class="sdt_menu">
 
<ul id="sdt_menu" class="sdt_menu">
 +
            <li>
 +
<a href="https://2015.igem.org/Team:SVCE_Chennai/Results">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b9/MenuImgs_results.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Results</span>
 +
<span class="sdt_descr">Data and Chart</span>
 +
</span>
 +
</a>
 +
                           
 +
</li>
 
<li>
 
<li>
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Gallery">
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Gallery">
Line 50: Line 62:
 
                     <div class="sdt_box">
 
                     <div class="sdt_box">
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Practices">Human Practices</a>
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Practices">Human Practices</a>
−
<a href="https://2015.igem.org/Team:SVCE_Chennai/Collab">Collaboration</a>
+
<a href="https://2015.igem.org/Team:SVCE_Chennai/Collaboration">Collaboration</a>
 +
                        <a href="https://2015.igem.org/Team:SVCE_Chennai/Entrepreneurship">Entrepreneurship</a>
 
</div>
 
</div>
 
</li>
 
</li>
Line 115: Line 128:
 
<div class="row stickyNotification">
 
<div class="row stickyNotification">
 
    
 
    
−
     <section id="photostack-1" class="photostack photostack-start">
+
     <div id="gal1" style="margin-top:-55px;">
−
<div>
+
       
−
+
    <img src="http://i.imgur.com/JU2xvEc.jpg"
−
<figure data-dummy>
+
        data-fullsrc="http://i.imgur.com/JU2xvEc.jpg"
−
<a href="#" class="photostack-img"><img src="https://placehold.it/350x150" alt="img16"/></a>
+
    />
−
<figcaption>
+
            <img src="http://i.imgur.com/UNlERHO.jpg"
−
<h2 class="photostack-title">Lightness</h2>
+
        data-fullsrc="http://i.imgur.com/UNlERHO.jpg"
−
</figcaption>
+
    />
−
</figure>
+
            <img src="http://i.imgur.com/Zzozs8Z.jpg"
−
</div>
+
        data-fullsrc="http://i.imgur.com/Zzozs8Z.jpg"
−
</section>
+
    />
 +
            <img src="http://i.imgur.com/81WcSx9.jpg"
 +
        data-fullsrc="http://i.imgur.com/81WcSx9.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/Hvy0UBA.jpg"
 +
        data-fullsrc="http://i.imgur.com/Hvy0UBA.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/GruIoeY.jpg"
 +
        data-fullsrc="http://i.imgur.com/GruIoeY.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/vk7hn4i.jpg"
 +
        data-fullsrc="http://i.imgur.com/vk7hn4i.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/kJF7RWy.jpg"
 +
        data-fullsrc="http://i.imgur.com/kJF7RWy.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/sWplFpI.jpg"
 +
        data-fullsrc="http://i.imgur.com/sWplFpI.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/7rd3Mx8.jpg"
 +
        data-fullsrc="http://i.imgur.com/7rd3Mx8.jpg"
 +
    />
 +
          <img src="http://i.imgur.com/mZUTlVm.jpg"
 +
        data-fullsrc="http://i.imgur.com/mZUTlVm.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/URzGdOS.jpg"
 +
        data-fullsrc="http://i.imgur.com/URzGdOS.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/ZLMrhhU.jpg"
 +
        data-fullsrc="http://i.imgur.com/ZLMrhhU.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/4nk0SSR.jpg"
 +
        data-fullsrc="http://i.imgur.com/4nk0SSR.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/9LXQ1xY.jpg"
 +
        data-fullsrc="http://i.imgur.com/9LXQ1xY.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/cEgrRmk.jpg"
 +
        data-fullsrc="http://i.imgur.com/cEgrRmk.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/skh9Q0f.jpg"
 +
        data-fullsrc="http://i.imgur.com/skh9Q0f.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/PHhdKPZ.jpg"
 +
        data-fullsrc="http://i.imgur.com/PHhdKPZ.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/AVrxt6m.jpg"
 +
        data-fullsrc="http://i.imgur.com/AVrxt6m.jpg"
 +
    />
 +
            <img src="http://i.imgur.com/sGNulkl.jpg"
 +
        data-fullsrc="http://i.imgur.com/sGNulkl.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/B7XqeOx.jpg"
 +
        data-fullsrc="http://i.imgur.com/B7XqeOx.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/HmAIato.jpg"
 +
        data-fullsrc="http://i.imgur.com/HmAIato.jpg"
 +
    />
 +
                <img src="http://i.imgur.com/fZuRRdY.jpg"
 +
        data-fullsrc="http://i.imgur.com/fZuRRdY.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/LNqoiZZ.jpg"
 +
        data-fullsrc="http://i.imgur.com/LNqoiZZ.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/cHLDzMl.jpg"
 +
        data-fullsrc="http://i.imgur.com/cHLDzMl.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/PvilU5j.jpg"
 +
        data-fullsrc="http://i.imgur.com/PvilU5j.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/qCQXPVW.jpg"
 +
        data-fullsrc="http://i.imgur.com/qCQXPVW.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/BXq2sRU.jpg"
 +
        data-fullsrc="http://i.imgur.com/BXq2sRU.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/L3qBsyW.jpg"
 +
        data-fullsrc="http://i.imgur.com/L3qBsyW.jpg"
 +
    />
 +
              <img src="http://i.imgur.com/iU0AhfP.jpg"
 +
        data-fullsrc="http://i.imgur.com/iU0AhfP.jpg"
 +
    />
 +
       
 +
    </div>
 
      
 
      
 
      
 
      
Line 158: Line 254:
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
−
    <script src="http://tympanus.net/Development/ScatteredPolaroidsGallery/js/modernizr.min.js"></script>
+
  <script type="text/javascript" src="http://vodkabears.github.io/galereya/js/jquery.galereya.min.js"></script>
−
<script src="http://tympanus.net/Development/ScatteredPolaroidsGallery/js/classie.js"></script>
+
    <script>
−
<script src="http://tympanus.net/Development/ScatteredPolaroidsGallery/js/photostack.js"></script>
+
         $('#gal1').galereya();
−
<script>
+
    </script>
−
+
−
new Photostack( document.getElementById( 'photostack-1' ), {
+
−
callback : function( item ) {
+
−
//console.log(item)
+
−
}
+
−
} );
+
−
+
−
</script>
+
−
    <style>
+
−
          
+
−
.photostack {
+
−
background: #ddd;
+
−
position: relative;
+
−
text-align: center;
+
−
overflow: hidden;
+
−
}
+
−
 
+
−
.js .photostack {
+
−
height: 580px;
+
−
}
+
−
 
+
−
.photostack-start {
+
−
cursor: pointer;
+
−
}
+
−
 
+
−
/* Wrapper and figures */
+
−
 
+
−
/* The size of this wrapper can be smaller if the items should not be scattered across the whole container */
+
−
.photostack > div {
+
−
width: 100%;
+
−
height: 100%;
+
−
margin: 0 auto;
+
−
}
+
−
 
+
−
.photostack figure {
+
−
width: 320px;
+
−
height: 360px;
+
−
position: relative;
+
−
display: inline-block;
+
−
background: #fff;
+
−
padding: 40px;
+
−
text-align: center;
+
−
margin: 5px;
+
−
}
+
−
 
+
−
.js .photostack figure {
+
−
position: absolute;
+
−
display: block;
+
−
margin: 0;
+
−
}
+
−
 
+
−
.photostack figcaption h2 {
+
−
margin: 20px 0 0 0;
+
−
color: #a7a0a2;
+
−
font-size: 16px;
+
−
}
+
−
 
+
−
.photostack-img {
+
−
outline: none;
+
−
display: block;
+
−
width: 240px;
+
−
height: 240px;
+
−
background: #f9f9f9;
+
−
}
+
−
 
+
−
.photostack-back {
+
−
display: none;
+
−
position: absolute;
+
−
width: 100%;
+
−
height: 100%;
+
−
top: 0;
+
−
left: 0;
+
−
background: #fff;
+
−
font-family: "Give You Glory", cursive;
+
−
color: #a7a0a2;
+
−
padding: 50px 40px;
+
−
text-align: left;
+
−
font-size: 22px;
+
−
line-height: 1.25;
+
−
z-index: 1;
+
−
}
+
−
 
+
−
.photostack-back p {
+
−
margin: 0;
+
−
}
+
−
 
+
−
.photostack-back p span {
+
−
text-decoration: line-through;
+
−
}
+
−
 
+
−
/* Navigation dots */
+
−
.photostack nav {
+
−
position: absolute;
+
−
width: 100%;
+
−
bottom: 30px;
+
−
z-index: 90;
+
−
text-align: center;
+
−
left: 0;
+
−
-webkit-transition: opacity 0.3s;
+
−
transition: opacity 0.3s;
+
−
}
+
−
 
+
−
.photostack-start nav {
+
−
opacity: 0;
+
−
}
+
−
+
−
.photostack nav span {
+
−
position: relative;
+
−
display: inline-block;
+
−
margin: 0 5px;
+
−
width: 30px;
+
−
height: 30px;
+
−
cursor: pointer;
+
−
background: #aaa;
+
−
border-radius: 50%;
+
−
text-align: center;
+
−
-webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
+
−
transition: transform 0.6s ease-in-out, background 0.3s;
+
−
-webkit-transform: scale(0.48);
+
−
transform: scale(0.48);
+
−
}
+
−
 
+
−
.photostack nav span:last-child {
+
−
margin-right: 0;
+
−
}
+
−
 
+
−
.photostack nav span::after {
+
−
content: "\e600";
+
−
font-family: 'icons';
+
−
font-size: 80%;
+
−
speak: none;
+
−
display: inline-block;
+
−
vertical-align: top;
+
−
font-style: normal;
+
−
font-weight: normal;
+
−
font-variant: normal;
+
−
text-transform: none;
+
−
line-height: 30px;
+
−
color: #fff;
+
−
opacity: 0;
+
−
-webkit-font-smoothing: antialiased;
+
−
-moz-osx-font-smoothing: grayscale;
+
−
-webkit-transition: opacity 0.3s;
+
−
transition: opacity 0.3s;
+
−
-webkit-backface-visibility: hidden;
+
−
backface-visibility: hidden;
+
−
}
+
−
 
+
−
.photostack nav span.current {
+
−
background: #888;
+
−
-webkit-transform: scale(1);
+
−
transform: scale(1);
+
−
}
+
−
 
+
−
.photostack nav span.current.flip {
+
−
-webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
+
−
transform: scale(1) rotateY(-180deg) translateZ(-1px);
+
−
background: #555;
+
−
}
+
−
 
+
−
.photostack nav span.flippable::after {
+
−
opacity: 1;
+
−
-webkit-transition-delay: 0.4s;
+
−
transition-delay: 0.4s;
+
−
}
+
−
 
+
−
/* Overlays */
+
−
 
+
−
/* Initial overlay on photostack container */
+
−
.js .photostack::before {
+
−
content: '';
+
−
position: absolute;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: rgba(0,0,0,0.5);
+
−
top: 0;
+
−
left: 0;
+
−
z-index: 100;
+
−
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
+
−
transition: opacity 0.3s, visibility 0s 0.3s;
+
−
}
+
−
 
+
−
.js .photostack-start::before {
+
−
-webkit-transition: opacity 0.3s;
+
−
transition: opacity 0.3s;
+
−
}
+
−
 
+
−
/* Button on photostack container */
+
−
.js .photostack::after {
+
−
content: 'View Gallery';
+
−
font-weight: 400;
+
−
position: absolute;
+
−
border: 3px solid #fff;
+
−
text-align: center;
+
−
white-space: nowrap;
+
−
left: 50%;
+
−
top: 50%;
+
−
-webkit-transform: translateY(-50%) translateX(-50%);
+
−
transform: translateY(-50%) translateX(-50%);
+
−
padding: 10px 20px;
+
−
color: #fff;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
cursor: pointer;
+
−
z-index: 101;
+
−
}
+
−
 
+
−
.js .photostack::before,
+
−
.js .photostack::after {
+
−
opacity: 0;
+
−
visibility: hidden;
+
−
}
+
−
 
+
−
.js .photostack-start::before,
+
−
.js .photostack-start:hover::after,
+
−
.touch .photostack-start::after  {
+
−
opacity: 1;
+
−
visibility: visible;
+
−
}
+
−
 
+
−
/* Overlay on figure */
+
−
.photostack figure::after {
+
−
content: '';
+
−
position: absolute;
+
−
width: 100%;
+
−
height: 100%;
+
−
top: 0;
+
−
left: 0;
+
−
visibility: visible;
+
−
opacity: 1;
+
−
background: rgba(0,0,0,0.05);
+
−
-webkit-transition: opacity 0.6s;
+
−
transition: opacity 0.6s;
+
−
}
+
−
 
+
−
/* Hide figure overlay when it becomes current */
+
−
figure.photostack-current::after {
+
−
-webkit-transition: opacity 0.6s, visibility 0s 0.6s;
+
−
transition: opacity 0.6s, visibility 0s 0.6s;
+
−
opacity: 0;
+
−
visibility: hidden;
+
−
}
+
−
 
+
−
/* Special classes for transitions and perspective */
+
−
.photostack-transition figure {
+
−
-webkit-transition: -webkit-transform 0.6s ease-in-out;
+
−
transition: transform 0.6s ease-in-out;
+
−
}
+
−
 
+
−
.photostack-perspective {
+
−
-webkit-perspective: 1800px;
+
−
perspective: 1800px;
+
−
}
+
−
 
+
−
.photostack-perspective > div,
+
−
.photostack-perspective figure {
+
−
-webkit-transform-style: preserve-3d;
+
−
transform-style: preserve-3d;
+
−
}
+
−
 
+
−
.photostack-perspective figure,
+
−
.photostack-perspective figure div {
+
−
-webkit-backface-visibility: hidden;
+
−
backface-visibility: hidden;
+
−
}
+
−
 
+
−
.photostack-perspective figure.photostack-flip {
+
−
-webkit-transform-origin: 0% 50%;
+
−
transform-origin: 0% 50%;
+
−
}
+
−
 
+
−
.csstransformspreserve3d figure.photostack-flip .photostack-back {
+
−
-webkit-transform: rotateY(180deg);
+
−
transform: rotateY(180deg);
+
−
display: block;
+
−
}
+
−
 
+
−
.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
+
−
display: block;
+
−
}
+
−
 
+
−
/* The no-JS fallback look does not need to be boring ;) */
+
−
.no-js .photostack figure {
+
−
box-shadow: -2px 2px 0 rgba(0,0,0,0.05);
+
−
}
+
−
 
+
−
.no-js .photostack figure::after {
+
−
display: none;
+
−
}
+
−
 
+
−
.no-js .photostack figure:nth-child(3n) {
+
−
-webkit-transform: translateX(-10%) rotate(5deg);
+
−
transform: translateX(-10%) rotate(5deg);
+
−
}
+
−
 
+
−
.no-js .photostack figure:nth-child(3n-2) {
+
−
-webkit-transform: translateY(10%) rotate(-3deg);
+
−
transform: translateY(10%) rotate(-3deg);
+
−
}
+
−
 
+
−
/* Some custom styles for the demo */
+
−
 
+
−
/* Since we don't have back sides for the first photo stack, we don't want the current dot to become too big */
+
−
#photostack-1 nav span.current {
+
−
background: #888;
+
−
-webkit-transform: scale(0.61);
+
−
transform: scale(0.61);
+
−
            }</style>
+
 
</html>
 
</html>

Latest revision as of 01:47, 19 September 2015

Gallery

Lets talk!

Sri Venkateswara College of Engineering, Chennai