"
Template:Uppsala-SwedenTemplatetest
From 2011.igem.org
| 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;
}
- info {z-index:100; height:22em;}
- info {z-index:100; height:22em;}
</style>
</head>
<body>
- <a href="#"><img src="
" alt="" /></a>
<a class="p1" href="#v"><img src="" alt="" /><img class="large" src="
" alt="" /></a>
</div>
</body>
