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.-->
+
<!--Credit to UIUC Illinois iGEM 2012 for their implementation of an idea that we wanted to do. We ended up using a lot of their code for the gallery.-->
<html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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" />
-
<style type = "text/css">
+
<link href="http://dl.dropbox.com/u/88390549/WashUiGEMstylesheet.css" rel="stylesheet" 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:49, 28 June 2012

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