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'}); | + | $(this).css({'z-index' : '10'}); |
- | $(this).find('img').addClass("hover").stop() | + | $(this).find('img').addClass("hover").stop() |
.animate({ | .animate({ | ||
- | marginTop: '-110px', | + | marginTop: '-110px', |
- | marginLeft: '-110px', | + | marginLeft: '-110px', |
- | top: '50%', | + | top: '50%', |
- | left: '50%', | + | left: '50%', |
- | width: '174px', | + | width: '174px', |
- | height: '174px', | + | height: '174px', |
- | padding: '20px' | + | padding: '20px' |
- | }, 200); | + | }, 200); |
- | + | ||
} , function() { | } , function() { | ||
- | $(this).css({'z-index' : '0'}); | + | $(this).css({'z-index' : '0'}); |
- | $(this).find('img').removeClass("hover").stop() | + | $(this).find('img').removeClass("hover").stop() |
.animate({ | .animate({ | ||
- | marginTop: '0', | + | marginTop: '0', |
marginLeft: '0', | marginLeft: '0', | ||
- | top: '0', | + | top: '0', |
- | left: '0', | + | left: '0', |
- | width: '100px', | + | width: '100px', |
- | height: '100px', | + | height: '100px', |
padding: '5px' | padding: '5px' | ||
}, 400); | }, 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> | ||
Revision as of 13:47, 11 July 2011