Biomod/2013/OSU/media: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
← Older editNewer edit →
No edit summary
No edit summary
(8 intermediate revisions by the same user not shown)
Line 6: Line 6:
<head>
<head>
<style type="text/css">
<style type="text/css">
.slider-container {
#media-container img{
        color: white;
height: 400px;
        text-align:left;
width:600px;
    }
padding: 30px;
 
.slider {
    position:relative;
    width:600px;
    height:400px;
    background-color:black;
    margin: 0 auto;
}
 
    .slider-prev {
        position:absolute; 
      width:30px;
        height:100%;
        background-color: black;
        padding-left:5px;
        padding-right:5px;
        filter: alpha(opacity=25);
        opacity: .25;
    }
    .slider-next {
        position:absolute; 
        right:0px;
        height:100%;
        background-color: black;
        padding-left:5px;
        padding-right:5px;
        filter: alpha(opacity=25);
        opacity: .25;
    }
 
    .slider-prev:hover {
        filter: alpha(opacity=55);
        opacity: .55;
    }
 
    .slider-next:hover {
        filter: alpha(opacity=55);
        opacity: .55;
    }
    .slider-prev a{
        position:absolute;
        top: 50%;
        text-decoration:none;
        color:#FFFFFF;
        font-size:24px;
     
    }
    .slider-next a{
      position:relative;
      top: 50%;
      text-decoration:none;
      color:#FFFFFF;
      font-size:24px;
    }
 
    .slider img {
        position:absolute;
    }
 
    #img-slider-caption{
        position:absolute; 
        bottom:0px;
        width:100%;
        background-color: black;
        padding-left:0px;
        padding-right:0px;
        filter: alpha(opacity=50);
        opacity: .50;
    }


.flashContent {
width:100%;
height:100%;
padding: 30px;
}
}
</style>
</style>
</head>


 
<body>
<script type="text/javascript">
 
var imgs = ["http://openwetware.org/images/5/5b/OSU_Deformed_shape1.png", "http://openwetware.org/images/5/50/OSU_Deformed_shape2.png", "http://openwetware.org/images/8/8b/OSUwetlab1.jpg", "http://openwetware.org/images/d/dc/OSUwetlab2.jpg", "http://openwetware.org/images/0/09/OSUwetlab3.jpg", "http://openwetware.org/images/4/43/OSUwetlab4.jpg", "http://openwetware.org/images/b/be/OSUwetlab5.jpg", "http://openwetware.org/images/c/c8/Ohiomod2013team.jpg"];
 
var allImgs = imgs
var structureImgs = [imgs[0], imgs[1]];
var labImgs = [imgs[7], imgs[2], imgs[3],imgs[4],imgs[5],imgs[6]];
 
var captions = ["Side view of our structure", "Front view of our structure", "Our lab", "Our lab again", "and again...", "Gel electrophoresis", "Examining the gel after running"];
 
var counter = 0;
 
function changeImages(type){
if (type=="lab"){imgs = labImgs;}
else if (type=="struct"){imgs = structureImgs;}
else { imgs = allImgs }
counter = 0;
document.getElementById("slider-img").setAttribute("src", imgs[counter]);
}
 
function next(){
counter++;
if (counter >= imgs.length){counter = 0;}
document.getElementById("slider-img").setAttribute("src", imgs[counter]);
document.getElementById("img-caption").innerHTML = captions[counter];
 
}
 
function previous(){
counter--;
if (counter < 0 ){counter = imgs.length - 1;}
document.getElementById("slider-img").setAttribute("src", imgs[counter]);
document.getElementById("img-caption").innerHTML = captions[counter];
 
}
 
</script>
 
</head>


<div id="media-container" style="width:65%;margin-left:auto;margin-right:auto;">
<div id="media-container" style="width:65%;margin-left:auto;margin-right:auto;">


<h1>Animations</h1>
<h1><a href="http://openwetware.org/wiki/Biomod/2013/OSU/animations">Animations</a></h1>
 
<center>
<h2>DMR</h2>
<div class="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="OSU-DMR-1" align="middle">
<param name="movie" value="http://openwetware.org/images/c/ca/OSU-DMR-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://openwetware.org/images/c/ca/OSU-DMR-1.swf" width="550" height="400">
<param name="movie" value="http://openwetware.org/images/c/ca/OSU-DMR-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
 
<h2>Origami</h2>
<div class="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="OSU-Origami-1" align="middle">
<param name="movie" value="http://openwetware.org/images/f/f9/OSU-Origami.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://openwetware.org/images/f/f9/OSU-Origami.swf" width="550" height="400">
<param name="movie" value="http://openwetware.org/images/f/f9/OSU-Origami.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</center>
 
<h1>Video Blogs</h1>
<center>
<iframe style="margin-top:10px" width="560" height="315" src="//www.youtube.com/embed/tGonkdAFvUs" frameborder="0" allowfullscreen></iframe>
</center>
 
<p>View the rest of our Video Blog posts on out <a href="http://www.youtube.com/user/OhioMOD2013">Youtube Channel</a>!</p>


<h1><a href="http://openwetware.org/wiki/Biomod/2013/OSU/photos">Photos</a></h1>


<h1>Photos</h1>
<h1><a href="http://openwetware.org/wiki/Biomod/2013/OSU/videoblogs">Video Blogs</a></h1>
<a onClick="changeImages('lab');">Lab Photos</a> |
<a onClick="changeImages('struct');">Structure Photos</a> |
<a onClick="changeImages('all');">All Photos</a>


<div class="slider-container" width="600" height="400" style="margin-top:10px">
</div>
    <div class="slider" width="600" height="400">
        <img id="slider-img" src="http://openwetware.org/images/5/5b/OSU_Deformed_shape1.png" width="600" height="400" />
        <div onClick="previous();" class="slider-prev">
            <a><<</a>
        </div>
        <div onClick="next();" class="slider-next">
            <a>>></a>
        </div>
        <div id="img-slider-caption">
          <p id="img-caption">Front view of our structure</p>
        </div>
          </div>
    </div>


</body>


</html>
</html>


{{OSUFooter}}
{{OSUFooter}}

Revision as of 02:30, 7 October 2013


<html>

<head> <style type='text/css'>

.firstHeading, #column-one, #p-bookmarks, #p-history , .portlet{ display:none; }

  1. bodyContent, #content{

display:none; background-color:#FFFFFF;

}

  1. column-content, .container, #globalWrapper, body{

background-color:#FFFFFF; }

p{ color:dimgrey; text-align:center; margin-left:auto; margin-right:auto; font-gamily:Calibri; font-size: 15px; }

.selflink{ display: table-cell; 

  text-decoration: none;
  font-family: Gill Sans MT;
  outline: none;
  font-size: 20px;
  color: dimgrey;
  border-right: 2px solid dimgray;
  padding: 15px 25px; /* sets button size */
  font-weight:normal;

}

ul.navigation-bar { 

  list-style-type: none;
  border: 2px solid dimgray;
  padding: 0px;
  margin-left: 20px;

width:615px; 

  *line-height: 3.2em; /* IE6,IE7 */
  }

ul.navigation-bar li { 

  display: table-cell;

  background-image: -webkit-linear-gradient(bottom, silver, azure);
  background-image:    -moz-linear-gradient(bottom, silver, azure);
  background-image:     -ms-linear-gradient(bottom, silver, azure);
  background-image:         linear-gradient(bottom, silver, azure);
  background-color: midnightblue; /* IE6...IE9 */
  *display: inline; /* IE6,IE7 */

  }


ul.navigation-bar li:hover { 

  background-image: -webkit-linear-gradient(top, silver, azure);
  background-image:    -moz-linear-gradient(top, silver, azure);
  background-image:     -ms-linear-gradient(top, silver, azure);
  background-image:         linear-gradient(top, silver, azure);

}

ul.navigation-bar li a, ul.navigation-bar li ul li a { 

  display: table-cell;
  text-decoration: none;
  font-family: Gill Sans MT;
  outline: none;
  font-size: 20px;
  color: dimgrey;
  border-right: 0px;
  padding: 15px 25px; /* sets button size */
  }

ul.navigation-bar li ul{ list-style: none; display: none; position: absolute; padding: 0px; margin: 1px 0px 0px -1px; background-color:#FFFFFF; border: 1px solid dimgrey; z-index:5; } ul.navigation-bar li ul li{ background-image: none; background-color:#FFFFFF; border-right: none; border: 0px solid dimgray; display: block; float: none; position: relative; }

ul.navigation-bar li ul li:hover{ background-image:none; background-color: lightgrey; }

ul.navigation-bar li:hover ul{ list-style: none; display: block; position: absolute; }

ul.navigation-bar li a{ display: block; }

.profile-right{ clear:both; }

.profile-right p{ text-align:left; float: left; } .profile-right img{ float: right; padding: 20px; }

.profile-left{ clear:both; }

.profile-left p{ text-align:left; float:left; }

.profile-left img{ float: left; padding:20px; }

  1. OSUfooter{

clear:both; }


  1. protocol-content table td{

border: 1px solid black; text-align:center; }

  1. protocol-content p{

text-align:left; }

.overlay-bg{ display:none; position:fixed; top:0; left:0; height:100%; width:100%; cursor: pointer; background: #000; background: rgba(0,0,0,0.75); }

.overlay-content{ background:#fff; padding:1%; width: 60%; position: relative; top:15%; left:50%; margin: 0 0 0 -30%; cursor: default; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.9);

}

.close-btn{ float:right; font-size:x-large; margin-top:-10px; }

</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript"> $(document).ready(function() { 

 $('.show-popup').click(function(event){
 event.preventDefault();
 $('.overlay-bg').show();

});

$('.close-btn').click(function(){ $('.overlay-bg').hide(); });

$('.overlay-bg').click(function(){ 

 $('.overlay-bg').hide();

});

$('.overlay-content').click(function(){ return false; });

}); </script>

</head>


<a href="http://openwetware.org/wiki/Biomod/2013"> << Back to Team Pages</a>

<img src="http://openwetware.org/images/1/15/Ohiomod2013.jpg" height="60%" width="60%" style="margin-left:-40px;">

</html>

Edit <html>

<head> <style type="text/css">

  1. media-container img{

height: 400px; width:600px; padding: 30px;

} </style> </head>

<body>

</body>

</html>


<html>

<head> <style>

  1. Footer table {
  width: 96.8%;
  max-width:2350px;
  bottom:0px;
  height:50px;   /* Height of the footer */
  font-weight:300;
  background-color: #2E2E2E;
   text-align:center;
   color: white;
   font-size:13px;
   border: 3px white solid;

}

  1. Footer {
   clear: both; /*may be omitted*/
   position: absolute;
   bottom: 12px; 
   background-color:#fffff;
   width: 100%;
   height: 40px; /* or anything you like */
}


</style> </head>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2013/OSU/media&oldid=735587"