Biomod/2013/OSU/media: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 94: Line 94:
         }
         }
</style>
</style>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
<script>
var imgarr = ["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"];
var imgarr = ["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"];

Revision as of 03:52, 3 July 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. slider-container {
       color: white;
       text-align:left;
   }
  1. 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-bar {
       position:absolute;   
       height:30px;
       width:100%;
       bottom:0px;
       background-color: black;
       filter: alpha(opacity=75);
       opacity: .75;
       
   }
       #img-bar td {
       color:white;
       padding: 4px;
       cursor:default;
       }


       #img-bar td:hover {
           background-color:red;
       }
       #static:hover {
           background-color:black;
       }

</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> var imgarr = ["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"];

window.onload = function () {

var text = "Jump To:";

   for (i = 1; i < imgarr.length + 1; i++) {

text += "" + i.toString() + "";

   }
   $('#num-imgs-table').html(text);

};


function jumpTo(jumpindex) {

   if (jumpindex >= 0 && jumpindex < imgarr.length) {
       $("#slider-img").attr("src", imgarr[jumpindex]);
   }

}

var index = 0; function next() {

   (index >= imgarr.length-1) ? index = 0 : index++;
   $("#slider-img").attr("src", imgarr[index);

} function previous() {

   (index <= 0) ? index = imgarr.length-1 : index--;
   $("#slider-img").attr("src",  imgarr[index]);

}

function check(){ alert('hey'); }

</script> </head>


       <img id="slider-img" src="http://openwetware.org/images/8/8b/OSUwetlab1.jpg" width="600" height="400" onclick="check();"/>
           <a href="#"><<</a>
           <a href="#">>></a>
   <script type="text/javascript">
       jumpTo(4);
   </script>


</html>