Template:MQgallery

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <!---Credit to Washington U---!> <style type = "text/css"> #galleria{ width:650px; height: 500px; background: #000; -webkit-box-shadow: 0 8px 6px -6px black; -mo...")
Line 1: Line 1:
 +
{{WashUPhotoGallerycss}}
 +
<!--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>
<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/0/08/IMG_3622.jpg">
-
.galleria-thumbnails-container{
+
            <img src="https://static.igem.org/mediawiki/2012/c/c4/PLAN1.jpg">
-
height:50px;
+
            <img src="https://static.igem.org/mediawiki/2012/1/1a/Igem2.jpg">
-
bottom:0;
+
            <img src="https://static.igem.org/mediawiki/2012/9/92/Igem1.jpg">
-
position: absolute;
+
            <img src="https://static.igem.org/mediawiki/2012/9/92/Igem1.jpg">
-
left:120px;
+
        </div>
-
right:10px;
+
 
-
z-index:2;
+
<script>
-
}
+
    Galleria.loadTheme('http://washuigemphotogallery.googlecode.com/files/galleria.classic.min.js');
-
.galleria-carousel .galleria-thumbnails-list{
+
    Galleria.run('#galleria', {
-
margin-left:30px;
+
imageCrop:'landscape',
-
margin-right:30px;
+
transition: 'fade',
-
}
+
lightbox: true,
-
.galleria-thumbnails .galleria-image{
+
autoplay: 5000
-
height:40px;
+
});
-
width:60px;
+
 
-
background: #000;
+
</script>
-
margin: 0 5px 0 0;
+
 
-
border: 1px solid #fff;
+
</body>
-
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>
+
</html>
</html>

Revision as of 10:23, 12 August 2012

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