Template:Uppsala-SwedenTemplatetest

From 2011.igem.org

(Difference between revisions)
Line 66: Line 66:
-
 
+
<!-- START Top enlarge function -->
Line 145: Line 145:
</script>  
</script>  
 +
<!-- END Top enlarge function -->
 +
 +
 +
 +
<!-- START Lower enlarge function -->
Line 183: Line 188:
#info {z-index:100; height:22em;}
#info {z-index:100; height:22em;}
 +
 +
<!-- END Lower enlarge function -->

Revision as of 09:29, 21 July 2011

{{Template:Uppsala-SwedenTemplate}} ''Uppsala '' University.

</div>



<style type="text/css">

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }


</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '500px', height: '500px', padding: '20px' }, 200);

} , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); });

//Swap Image on Click $("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; });

}); </script>





<style type="text/css">

a.p1 {display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;} a.p1 img {display:block; border:0;} a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;} a.p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);

-o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;

-webkit-transition: opacity 0.6s ease-in-out;

}


a.p1:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;

}

  1. info {z-index:100; height:22em;}
  1. info {z-index:100; height:22em;}



</style>

</head>

<body>



  • <a href="#"><img src="Erik.jpg" alt="" /></a>


<a class="p1" href="#v"><img src="Erik.jpg" alt="" /><img class="large" src="Erik_L.jpg" alt="" /></a>











</div>



</body>