demo_resizeposition.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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: 'standard',
  36. lens:true,
  37. preloadImages: false,
  38. alwaysOn:false,
  39. zoomWidth: 200,
  40. zoomHeight: 200,
  41. xOffset:90,
  42. yOffset:30,
  43. position:'left'
  44. });
  45. //$('.jqzoom').jqzoom();
  46. });
  47. </script>
  48. </head>
  49. <body>
  50. <div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
  51. <div class="clearfix">
  52. <a href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
  53. <img src="imgProd/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;">
  54. </a>
  55. <select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
  56. </div>
  57. <br/>
  58. <div class="clearfix" >
  59. <ul id="thumblist" class="clearfix" >
  60. <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>
  61. <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>
  62. <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>
  63. </ul>
  64. </div>
  65. </div>
  66. <div class="clearfix" style="margin-left:100px">
  67. <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>
  68. <a href='mailto:renzi.mrc@gmail.com' style="display:inline-block">
  69. <img src='../images/advertise.jpg'>
  70. </a>
  71. &nbsp;
  72. </div>
  73. </body></html>