Template:Uppsala-SwedenTemplatetest

From 2011.igem.org

(Difference between revisions)
Line 33: Line 33:
-
<script type="text/javascript">
+
</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() {
$("ul.thumb li").hover(function() {
-
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
+
$(this).css({'z-index' : '10'});
-
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
+
$(this).find('img').addClass("hover").stop()
.animate({
.animate({
-
marginTop: '-110px', /* The next 4 lines will vertically align this image */
+
marginTop: '-110px',  
-
marginLeft: '-110px',
+
marginLeft: '-110px',  
-
top: '50%',
+
top: '50%',  
-
left: '50%',
+
left: '50%',  
-
width: '174px', /* Set new width */
+
width: '174px',  
-
height: '174px', /* Set new height */
+
height: '174px',
-
padding: '20px'
+
padding: '20px'  
-
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
+
}, 200);
-
 
+
} , function() {
} , function() {
-
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
+
$(this).css({'z-index' : '0'});
-
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
+
$(this).find('img').removeClass("hover").stop()
.animate({
.animate({
-
marginTop: '0', /* Set alignment back to default */
+
marginTop: '0',  
marginLeft: '0',
marginLeft: '0',
-
top: '0',
+
top: '0',  
-
left: '0',
+
left: '0',  
-
width: '100px', /* Set width back to default */
+
width: '100px',  
-
height: '100px', /* Set height back to default */
+
height: '100px',  
padding: '5px'
padding: '5px'
}, 400);
}, 400);
});
});
-
 
+
//Swap Image on Click
-
</script">
+
$("ul.thumb li a").click(function() {
-
 
+
-
</style>
+
var mainImage = $(this).attr("href"); //Find Image Name
-
 
+
$("#main_view img").attr({ src: mainImage });
 +
return false;
 +
});
 +
 +
});
 +
</script>  

Revision as of 13:47, 11 July 2011