@@ Line 1: / Line 1: @@
+{{MQgallerycss}}
+<!--Credit to UIUC Illinois iGEM 2012 AND Washington U! 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>
-<!---Credit to Washington U---!>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<style type = "text/css">
+<html xmlns="http://www.w3.org/1999/xhtml">
-#galleria{ width:650px; height: 500px; background: #000;
-  -webkit-box-shadow: 0 8px 6px -6px black;
-        -moz-box-shadow: 0 8px 6px -6px black;
-        box-shadow: 0 8px 6px -6px black;
-        margin-top:2px;
-        margin-left:auto;
-        margin-right: auto;
-        margin-bottom:2px;}
-.galleria-container{
+<head>
-position: relative;
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-overflow: hidden;
-}
-.galleria-container img{
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
--moz-user-select: none;
+<script src="http://washuigemphotogallery.googlecode.com/files/galleria-1.2.7.min.js"></script>
--webkit-user-select:none;
+</head>
--o-user-select:none;
-}
+<body>
-.galleria-stage{
-position: absolute;
+<!--Content Start-->
-top: 10px;
+    	<div id="content1-topcenter">
-bottom: 60px;
-left: 10px;
-right: 10px;
-overflow: hidden;
+        <div id="galleria">
-}
+<img src="https://static.igem.org/mediawiki/2012/6/6d/Slide1MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide1MQ.jpg">
-.galleria-thumbnails-container{
+<img src="https://static.igem.org/mediawiki/2012/8/86/Slide2MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide2MQ.jpg">
-height:50px;
+<img src="https://static.igem.org/mediawiki/2012/5/52/Slide3MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide3MQ.jpg">
-bottom:0;
+<img src="https://static.igem.org/mediawiki/2012/c/c8/Slide4MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide4MQ.jpg">
-position: absolute;
+<img src="https://static.igem.org/mediawiki/2012/0/08/Slide5MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide5MQ.jpg">
-left:120px;
+<img src="https://static.igem.org/mediawiki/2012/a/ae/Slide6MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide6MQ.jpg">
-right:10px;
+<img src="https://static.igem.org/mediawiki/2012/6/6b/Slide7MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide7MQ.jpg">
-z-index:2;
+<img src="https://static.igem.org/mediawiki/2012/f/f6/Slide8MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide8MQ.jpg">
-}
+<img src="https://static.igem.org/mediawiki/2012/4/43/Slide9MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide9MQ.jpg">
-.galleria-carousel .galleria-thumbnails-list{
+<img src="https://static.igem.org/mediawiki/2012/b/b1/Slide10MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide10MQ.jpg">
-margin-left:30px;
+<img src="https://static.igem.org/mediawiki/2012/e/e9/Slide11MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide11MQ.jpg">
-margin-right:30px;
+<img src="https://static.igem.org/mediawiki/2012/e/e5/Slide12MQ.jpg" data-title="" data-description="<strong></strong>" data-link="https://2012.igem.org/File:Slide12MQ.jpg">
-}
+ <img src="https://static.igem.org/mediawiki/2012/b/b4/Slide13MQ.jpg" data-title="" data-description="<strong></strong>" data-link="ttp://2012.igem.org/File:Slide13MQ.jpg">
-.galleria-thumbnails .galleria-image{
+        </div>
-height:40px;
-width:60px;
+<script>
-background: #000;
+    Galleria.loadTheme('http://mq-i-gem.googlecode.com/files/galleria.classic.minRYANEDIT.js');
-margin: 0 5px 0 0;
+    Galleria.run('#galleria', {
-border: 1px solid #fff;
+imageCrop:'landscape',
-float: left;
+transition: 'fade',
-cursor: pointer;
+lightbox: true,
-}
+autoplay: 5000
-.galleria-counter{
+});
-position: absolute;
-bottom: 10px;
+</script>
-left: 10px;
+<script>
-text-align: right;
+Galleria.run('#galleria', {
-color: #fff;
-font: normal 11px/1 arial, sans-serif;
+    extend: function(options) {
-z-index: 1;
-}
+      $("#gallery").galleria({
-.galleria-loader{
+    width: 661,
-background: #000;
+    height: 661,
-width: 20px;
+    extend: function(options) {
-height: 20px;
+        Galleria.get(0).$('info-link').click();
-position: absolute;
+    }
-top:10px;
+});
-right:10px;
+</script>
-z-index: 2;
+</body>
-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>
 </html>

Template:MQgallery

From 2012.igem.org

Latest revision as of 01:22, 11 September 2012