|
|
| Line 6: |
Line 6: |
| | | | |
| | | | |
| - |
| |
| - |
| |
| - |
| |
| - | <div class="container">
| |
| - | <ul class="thumb">
| |
| - | <li><a href="https://lh5.googleusercontent.com/-8Q17V5HrLcc/TibGG1sr18I/AAAAAAAAAWY/Ny7zIgjZCKg/s800/IMG_4699.JPG"><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="https://lh4.googleusercontent.com/-2X_yY8oENAQ/Tif3nCcE1KI/AAAAAAAAAYo/4UJKu-X5Wbk/s800/IMG_4750.JPG"><img src="https://lh4.googleusercontent.com/-2X_yY8oENAQ/Tif3nCcE1KI/AAAAAAAAAYo/4UJKu-X5Wbk/s144/IMG_4750.JPG" alt="" /></a></li>
| |
| - | </ul>
| |
| - | <div id="main_view">
| |
| - | <img src="https://lh5.googleusercontent.com/-8Q17V5HrLcc/TibGG1sr18I/AAAAAAAAAWY/Ny7zIgjZCKg/s800/IMG_4699.JPG"/>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - | <!---==========================CSS==============================================-->
| |
| - | <style type="text/css">
| |
| - | body {
| |
| - | font: Arial, Helvetica, sans-serif normal 10px;
| |
| - | margin: 0; padding: 0;
| |
| - | }
| |
| - | #content
| |
| - | {
| |
| - | height:900px;
| |
| - | }
| |
| - | * {margin: 0; padding: 0;}
| |
| - | img {border: none;}
| |
| - | .container {
| |
| - | height: 360px;
| |
| - | width: 910px;
| |
| - | margin-left:-280px;
| |
| - | margin-top:-430px;
| |
| - | top: 50%; left: 50%;
| |
| - | position: absolute;
| |
| - | }
| |
| - | ul.thumb {
| |
| - | float: left;
| |
| - | list-style: none;
| |
| - | margin: 0; padding: 10px;
| |
| - | width: 650px;
| |
| - | }
| |
| - | ul.thumb li {
| |
| - | margin: 0; padding: 5px;
| |
| - | float: left;
| |
| - | position: relative;
| |
| - | width: 110px;
| |
| - | height: 110px;
| |
| - | }
| |
| - | ul.thumb li img {
| |
| - | width: 100px; height: 100px;
| |
| - | border: 1px solid #ddd;
| |
| - | padding: 5px;
| |
| - | background: #f0f0f0;
| |
| - | position: absolute;
| |
| - | left: 0; top: 0;
| |
| - | -ms-interpolation-mode: bicubic;
| |
| - | }
| |
| - | ul.thumb li img.hover {
| |
| - | background:url(thumb_bg.png) no-repeat center center;
| |
| - | border: none;
| |
| - | }
| |
| - | #main_view{
| |
| - | float: left;
| |
| - | padding: 9px 0;
| |
| - | margin-left: -10px;
| |
| - | }
| |
| - | #main_view img{
| |
| - | height: 550px;
| |
| - | width: 700px;
| |
| - | }
| |
| - | #menu
| |
| - | {
| |
| - | height:900px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - | <!---=================================================JS==============================================-->
| |
| - | <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: '174px',
| |
| - | height: '174px',
| |
| - | 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>
| |
| | </html> | | </html> |
"
