Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<!--Sorry we're borrowing code for Illinois Header and will cite properly soon.-->
<!--Sorry we're borrowing code for Illinois Header and will cite properly soon.-->
-
{{Template:UIUC Illinois Header}}
 
<html>
<html>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<link rel="stylesheet" href="https://2012.igem.org/Template:UIUC_Illinois_CSS?action=raw&ctype=text/css" type="text/css"/>
+
<style type = "text/css">
 +
#galleria{ width:1000px; height: 400px; background: #000}
 +
 
 +
.galleria-container{
 +
position: relative;
 +
overflow: hidden;
 +
background: #fff;
 +
}
 +
 
 +
.galleria-container img{
 +
-moz-user-select: none;
 +
-webkit-user-select:none;
 +
-o-user-select:none;
 +
}
 +
.galleria-stage{
 +
position: absolute;
 +
top: 10px;
 +
bottom: 60px;
 +
left: 10px;
 +
right: 10px;
 +
overflow: hidden;
 +
}
 +
.galleria-thumbnails-container{
 +
height:50px;
 +
bottom:0;
 +
position: absolute;
 +
left:10px;
 +
right:10px;
 +
z-index:2;
 +
}
 +
.galleria-carousel .galleria-thumbnails-list{
 +
margin-left:30px;
 +
margin-right:30px;
 +
}
 +
.galleria-thumbnails .galleria-image{
 +
height:40px;
 +
width:60px;
 +
background: #000;
 +
margin: 0 5px 0 0;
 +
border: 1px solid #fff;
 +
float: left;
 +
cursor: pointer;
 +
}
 +
.galleria-counter{
 +
position: absolute;
 +
bottom: 10px;
 +
left: 10px;
 +
text-align: right;
 +
color: #fff;
 +
font: normal 11px/1 arial, sans-serif;
 +
z-index: 1;
 +
}
 +
.galleria-loader{
 +
background: #000;
 +
width: 20px;
 +
height: 20px;
 +
position: absolute;
 +
top:10px;
 +
right:10px;
 +
z-index: 2;
 +
display: none;
 +
background: url(classic-loader.gif) no-repeat 2px 2px;
 +
}
 +
.galleria-info{
 +
width: 50%;
 +
top: 15px;
 +
left: 15px;
 +
z-index:2;
 +
position:absolute;
 +
}
 +
.galleria-info-text{
 +
background-color: #000;
 +
padding: 12px;
 +
display:none;
 +
/*IE7*/ zoom:1;
 +
}
 +
.galleria-info-title{
 +
font: bold 12px/1.1 arial, sans-serif;
 +
margin: 0;
 +
color:#fff;
 +
margin-bottom: 7px;
 +
}
 +
.galleria-info-description{
 +
font: italic 12px/1.4 georgia, serif;
 +
margin: 0;
 +
color: #bbb;
 +
}
 +
.galleria-info-close{
 +
width:9px;
 +
height:9px;
 +
position: absolute;
 +
top: 5px;
 +
right:5px;
 +
background-position: -753px -11px;
 +
opacity: .5;
 +
filter: alpha(opacity=50);
 +
cursor:pointer;
 +
display: none;
 +
}
 +
.notouch .galleria-info-close:hover{
 +
opacity:1;
 +
filter: alpha(opacity=100);
 +
}
 +
.touch .galleria-info-close:active{
 +
opacity:1;
 +
filter: alpha(opacity=100);
 +
}
 +
.galleria-info-link{
 +
background-position: -669px -5px;
 +
opacity: .7;
 +
filter: alpha(opacity=70);
 +
position: absolute;
 +
width: 20px;
 +
height: 20px;
 +
cursor: pointer;
 +
background-color: #000;
 +
}
 +
.notouch .galleria-info-link:hover{
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
}
 +
.touch .galleria-info-link:active{
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
}
 +
.galleria-image-nav{
 +
position:absolute;
 +
top:50%;
 +
margin-top: -62px;
 +
width: 100%;
 +
height: 62px;
 +
left:0;
 +
}
 +
.galleria-image-nav-left,
 +
.galleria-image-nav-right{
 +
opacity:.3;
 +
filter:alpha (opacity=30);
 +
cursor: pointer;
 +
width: 62px;
 +
height:124px;
 +
position: absolute;
 +
left:10px;
 +
z-index: 2;
 +
background-position: 0 46px;
 +
}
 +
.galleria-image-nav-right{
 +
left: auto;
 +
right:10px;
 +
background-position: -254px 46px;
 +
z-index:2;
 +
}
 +
.notouch .galleria-image-nav-left:hover,
 +
.notouch .galleria-image-nav-right:hover {
 +
opacity:1;
 +
filter: alpha(opacity=100);
 +
}
 +
.touch .galleria-image-nav-left:active,
 +
.touch .galleria-image-nav-right:active{
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
}
 +
.galleria-thumb-nav-left,
 +
.galleria-thumb-nav-right{
 +
cursor:pointer;
 +
display: none;
 +
background-position: -495px 5px;
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
height: 40px;
 +
width: 23px;
 +
z-index: 3;
 +
opacity: .8;
 +
filter: alpha(opacity=80);
 +
}
 +
.galleria-thumb-nav-right{
 +
background-position: -578px 5px;
 +
border-right: none;
 +
right: 0;
 +
left: auto;
 +
}
 +
.galleria-thumbnails-container .disabled {
 +
opacity: .2;
 +
filter: alpha(opacity=20);
 +
cursor: default;
 +
}
 +
.notouch .galleria-thumb-nav-left:hover,
 +
.notouch .galleria-thumb-nav-right:hover{
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
background-color: #111;
 +
}
 +
.touch .galleria-thumb-nav-left:active,
 +
.touch .galleria-thumb-nav-right:active{
 +
opacity: 1;
 +
filter: alpha(opacity=100);
 +
background-color: #111;
 +
}
 +
.notouch .galleria-thumbnails-container .disabled:hover {
 +
opacity: .2;
 +
filter: alpha(opacity=20);
 +
background-color: transparent;
 +
}
 +
.galleria-carousel .galleria-thumb-nav-left,
 +
.galleria-carousel .galleria-thumb-nav-right{
 +
display: block;
 +
}
 +
.galleria-thumb-nav-left,
 +
.galleria-thumb-nav-right,
 +
.galleria-info-link,
 +
.galleria-info-close,
 +
.galleria-image-nav-left,
 +
.galleria-image-nav-right {
 +
background-image: url('http://i.imgur.com/tLDSr.png');
 +
background-repeat: no-repeat;
 +
}
 +
</style>
<title>Header</title>
<title>Header</title>

Revision as of 17:18, 28 June 2012

Header

Retrieved from "http://2012.igem.org/Template:WashUPhotoGallery"