|
|
| (15 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <!--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.--> | + | {{WashUPhotoGallerycss}} |
| | + | <!--Credit to UIUC Illinois iGEM 2012 for their implementation of an idea that we wanted to do. Their site inspired us to work harder and figure out how to do this ourselves.--> |
| | <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 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> |
| - | <script src="http://illinoisigem.googlecode.com/files/galleria-1.2.7.min.js"></script> | + | <script src="http://washuigemphotogallery.googlecode.com/files/galleria-1.2.7.min.js"></script> |
| | </head> | | </head> |
| | | | |
| Line 237: |
Line 21: |
| | <div id="galleria"> | | <div id="galleria"> |
| | <img src="https://lh3.googleusercontent.com/-wRfqEDxRJM4/T-yvPE9SkVI/AAAAAAAAANU/FKW9buabxH4/s800/P1050501.JPG"> | | <img src="https://lh3.googleusercontent.com/-wRfqEDxRJM4/T-yvPE9SkVI/AAAAAAAAANU/FKW9buabxH4/s800/P1050501.JPG"> |
| - | <img src="https://lh3.googleusercontent.com/-isttUszXwEc/T9YLHslO0JI/AAAAAAAAAB4/39xJI1mH57k/s640/P1050389.JPG"> | + | <img src="https://lh3.googleusercontent.com/-4OxZtCS6lX4/T_WTV9vubmI/AAAAAAAAARI/Im7ADpihvWs/s800/P1050634.JPG"> |
| - | <img src="https://lh3.googleusercontent.com/-LBZpL-nXB_w/T9dZSvK9dsI/AAAAAAAAAC4/usy6Nw41Caw/s288/20120612_092704.jpg"> | + | <img src="https://lh5.googleusercontent.com/-xb_QasdnsjA/UCLjx-nv-nI/AAAAAAAAAfM/j6PgaP_lcnQ/s800/P1060020.JPG"> |
| - | <img src="https://static.igem.org/mediawiki/2012/b/b0/CarotenoidGel.tif">
| + | |
| - | <img src="https://static.igem.org/mediawiki/2012/d/da/YLCdigest.jpg">
| + | |
| | <img src="https://lh5.googleusercontent.com/-6fFuhw2-sf4/T-ywtnqKqbI/AAAAAAAAANs/wN9aqfgc2to/s800/20120620_180232.jpg"> | | <img src="https://lh5.googleusercontent.com/-6fFuhw2-sf4/T-ywtnqKqbI/AAAAAAAAANs/wN9aqfgc2to/s800/20120620_180232.jpg"> |
| | + | <img src="https://lh6.googleusercontent.com/-o770FjmW2oI/T-zOwxyS6mI/AAAAAAAAAP0/XSQfCEzgEdY/s800/P1050550.jpg"> |
| | + | <img src="https://lh5.googleusercontent.com/-vunnaspAM3Y/UCvzDHzp7EI/AAAAAAAAAg8/Nbei_G9KGWo/s800/P1050993.JPG"> |
| | + | <img src="https://lh4.googleusercontent.com/-5UrHwTMRPiM/UCvyrIlsayI/AAAAAAAAAhc/CKYZHdMvoFo/s800/P1060127.JPG"> |
| | </div> | | </div> |
| | | | |
| | <script> | | <script> |
| - | Galleria.loadTheme('http://illinoisigem.googlecode.com/files/galleria.classic.min.js'); | + | Galleria.loadTheme('http://washuigemphotogallery.googlecode.com/files/galleria.classic.min.js'); |
| | Galleria.run('#galleria', { | | Galleria.run('#galleria', { |
| | imageCrop:'landscape', | | imageCrop:'landscape', |
"
