圖檔顯示--放大鏡效果(JQuery)

http://www.itpob.cn

jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.

I decided to build this jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your jQZoom in your website,eCommerce or whatever you want.Author: Renzi Marco ,December 2007

1)Simply include the jqzoom.css in your page.(在你的頁面加載jqzoom.ss)

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2)Include jQzoom and jQuery code(加載jquery.js以及jqzoom.js檔案)

<script type="text/javascript" src="your_path/jquery.js"></script> <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3)Now assign the "jqzoom" class to the image or images you would like to zoom,and specify for each one,the alt attribute,to wich you are going to assign the big image path.（現在吧jqzoom賦給你要顯示的圖檔，要分别設定每一張圖檔，alt路徑代表你對應的放大的圖檔的位置）

<img src="your_path/imagename_small.jpg" class="jqzoom" alt="your_path/imagename_big.jpg">

4)Load the plugin at window load

jQuery(document).ready(function(){ $("img.jqzoom").jqueryzoom(); });

You can also specify some options:

jQuery(document).ready(function(){ $("img.jqzoom").jqueryzoom( { xzoom: 300, //zooming div default width(default width value is 200)  yzoom: 300, //zooming div default width(default height value is 200) offset: 40, //zooming div default offset(default offset value is 10) position: "right" //zooming div position(default position value is "right") }); });

DEMO示範：http://bbs.okajax.com/demo/17/

源碼下載下傳：

檔案: jQZoom_v1.1.zip 大小: 296KB 下載下傳: 下載下傳