|
|
| Line 1: |
Line 1: |
| | + | {{WashUPhotoGallerycss}} |
| | <!--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.--> | | <!--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> |
| Line 6: |
Line 7: |
| | <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">
| |
| - | #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> |
"
