demo_innerzoom.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>JQzoom 2 Demo</title>
  5. <script src="../js/jquery-1.5.js" type="text/javascript"></script>
  6. <script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
  7. <link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
  8. <style type"text/css">
  9. body{margin:0px;padding:0px;font-family:Arial;}
  10. a img,:link img,:visited img { border: none; }
  11. table { border-collapse: collapse; border-spacing: 0; }
  12. :focus { outline: none; }
  13. *{margin:0;padding:0;}
  14. p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
  15. fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
  16. fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
  17. dl dd{margin:0px;}
  18. dl dt{}
  19. .clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
  20. .clearfix{display:block;zoom:1}
  21. ul#thumblist{display:block;}
  22. ul#thumblist li{float:left;margin-right:2px;list-style:none;}
  23. ul#thumblist li a{display:block;border:1px solid #CCC;}
  24. ul#thumblist li a.zoomThumbActive{
  25. border:1px solid red;
  26. }
  27. .jqzoom{
  28. text-decoration:none;
  29. float:left;
  30. }
  31. </style>
  32. <script type="text/javascript">
  33. $(document).ready(function() {
  34. $('.jqzoom').jqzoom({
  35. zoomType: 'innerzoom',
  36. preloadImages: false,
  37. alwaysOn:false
  38. });
  39. });
  40. </script>
  41. </head>
  42. <body>
  43. <div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
  44. <div class="clearfix">
  45. <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
  46. <img src="imgProd/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
  47. </a>
  48. <select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
  49. </div>
  50. <br/>
  51. <div class="clearfix" >
  52. <ul id="thumblist" class="clearfix" >
  53. <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
  54. <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
  55. <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
  56. </ul>
  57. </div>
  58. </div>
  59. <div class="clearfix" style="margin-left:100px">
  60. <div class="clearfix"><small style="font-size:10px;">ADVERTISE HERE - contact me at <span style="color:#CC0000">renzi.mrc[at]gmail.com</span></small></div>
  61. <a href='mailto:renzi.mrc@gmail.com' style="display:inline-block">
  62. <img src='../images/advertise.jpg'>
  63. </a>
  64. &nbsp;
  65. </div>
  66. </body></html>