Team:Sevilla/Gallery
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{:Team:Sevilla/Templates/general}} | {{:Team:Sevilla/Templates/general}} | ||
- | + | ||
- | <! | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
- | + | <html xmlns="http://www.w3.org/1999/xhtml"> | |
- | + | <head> | |
- | + | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
- | + | <title>Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka</title> | |
- | + | <style type="text/css"> | |
- | + | body { | |
- | + | font: Arial, Helvetica, sans-serif normal 10px; | |
- | + | margin: 0; padding: 0; | |
- | + | } | |
- | + | * {margin: 0; padding: 0;} | |
- | + | img {border: none;} | |
- | + | .container { | |
- | + | height: 360px; | |
+ | width: 910px; | ||
+ | margin: -180px 0 0 -450px; | ||
+ | top: 50%; left: 50%; | ||
+ | position: absolute; | ||
+ | } | ||
ul.thumb { | ul.thumb { | ||
float: left; | float: left; | ||
Line 25: | Line 30: | ||
margin: 0; padding: 5px; | margin: 0; padding: 5px; | ||
float: left; | float: left; | ||
- | position: relative; | + | position: relative; |
width: 110px; | width: 110px; | ||
height: 110px; | height: 110px; | ||
} | } | ||
ul.thumb li img { | ul.thumb li img { | ||
- | width: 100px; height: 100px; | + | width: 100px; height: 100px; |
- | + | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
padding: 5px; | padding: 5px; | ||
Line 37: | Line 41: | ||
position: absolute; | position: absolute; | ||
left: 0; top: 0; | left: 0; top: 0; | ||
+ | -ms-interpolation-mode: bicubic; | ||
} | } | ||
ul.thumb li img.hover { | ul.thumb li img.hover { | ||
- | background:url(thumb_bg.png) no-repeat center center; | + | background:url(thumb_bg.png) no-repeat center center; |
- | border: none; | + | border: none; |
} | } | ||
- | </style> | + | #main_view { |
- | < | + | float: left; |
- | <script type="text/javascript"> | + | padding: 9px 0; |
+ | margin-left: -10px; | ||
+ | } | ||
+ | </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); | ||
}); | }); | ||
- | </script> | + | |
- | + | //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> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div class="container"> | ||
+ | <ul class="thumb"> | ||
+ | <li><a href="#"><img src="https://lh3.googleusercontent.com/--fN95DhBGM8/TibGE2DB7-I/AAAAAAAAAWE/MDonZbL0fNA/s144/IMG_4705.JPG.jpg" alt="" /></a></li> | ||
+ | <li><a href="https://lh5.googleusercontent.com/-0W6X9-bK_qA/TibGHbXNG1I/AAAAAAAAAWg/VgdXn-Sz438/s800/IMG_4698.JPG"><img src="https://lh5.googleusercontent.com/-0W6X9-bK_qA/TibGHbXNG1I/AAAAAAAAAWg/VgdXn-Sz438/s144/IMG_4698.JPG" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="https://lh4.googleusercontent.com/-2X_yY8oENAQ/Tif3nCcE1KI/AAAAAAAAAYo/4UJKu-X5Wbk/s144/IMG_4750.JPG" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb4.jpg" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb5.jpg" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb6.jpg" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb7.jpg" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb8.jpg" alt="" /></a></li> | ||
+ | <li><a href="#"><img src="thumb9.jpg" alt="" /></a></li> | ||
+ | </ul> | ||
+ | <div id="main_view"> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 17:11, 23 July 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">