Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
Line 6: Line 6:
<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 href="http://dl.dropbox.com/u/88390549/WashUiGEMstylesheet.css" rel="stylesheet" type="text/css" />
+
<style type = "text/css">
 +
#galleria{ width:650px; height: 500px; background: #000}
 +
 
 +
.galleria-container{
 +
position: relative;
 +
overflow: hidden;
 +
background: #ffefd5;
 +
}
 +
 
 +
.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:220px;
 +
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:#ffefd5;
 +
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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Revision as of 18:57, 28 June 2012

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