這是一款非常不錯的給圖片添加放大鏡效果,可以應用在諸如zen cart,magento電子商場之類的開源項目上.如果想看它的效果,你可以直接訪問:
http://www.mind-projects.it/projects/jqzoom/demos.php
覺得不錯就下載一個玩玩吧,jQuery出來的插件都是非常容易使用的,也可以當做學習的示例.
如何安裝:
先在網頁中包含jQuery文件,然后再包含jQZoom的文件,如下:
<script type='text/javascript' src='js/jquery-1.2.6.js'></script> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
然后再將jqzoom.css添加到網頁中:
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
如何使用?
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
使用是很簡單的,先指定一個<a>標簽,指向一個大的圖片,里面包含一個小圖片:
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a>
SMALLIMAGE.JPG:這個是默認用戶看見的圖片,也就是之后被放大的圖片
BIGIMAGE.JPG: 放大鏡所看到的圖片
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用來標識這個<a>標簽要應用放大鏡功能.之后我們可以通過class選擇器來選擇所有的要應用jQZoom的<a>標簽.
MYTITLE/IMAGE TITLE: 這些文本它們會被顯示在放大鏡窗口上.
准備工作做完了就可以通過下面的簡單代碼來調用jQZoom:
$(document).ready(function(){
$('.MYCLASS).jqzoom();
});
這樣只是使用jQZoom的標簽模式,事實上它有更多的參數可以設置,以獲得更多的效果,看下面的示例:
$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});
屬性：
Cloud Zoom具有許多屬性，設置這些屬性可以改變圖片的外觀和視覺效果。
Cloud Zoom的屬性可以在data-cloudzoom里指定屬性,例如:
data-cloudzoom = "zoomImage: '/mypath.jpg', useZoom: '#zoom1'"
文本值/字符串在引用時應該加引號，如useZoom:“# myZoom”。數字、真假不用加，如zoomFlyOut:false
注意:Cloud Zoom的舊版本(2.1 1210171228)要求屬性具有嚴格的JSON格式。雖然依然可以生效,但現在不推薦使用。
屬性列表：
| 屬性名 | 類型 | 描述 | 默認值 |
| zoomImage | string | 縮放圖片的路徑，如果沒有指定的縮放圖片，將使用小圖(在圖像元素中被指定的圖片) | " " |
| tintColor |
string | 色彩效果 | #fff |
| tintOpacity | number | 指定色彩的透明度，范圍是0 - 1，0是完全透明，1是完全不透明。 | 0.25 |
| animationTime |
number | 動畫效果的持續時間,以毫秒為單位。 | 500 |
| lensClass | string | 用於鏡頭的css類 | cloudzoom-lens |
| easeTime (DEPRECATED V3.0) | number | 鼠標滑上時放大圖像的時間。數字越大緩動越大，為0時沒有緩動。 | 500 |
| zoomPosition | number | string |
縮放窗口的指定位置，如果數字(0-15)的位置是相對於頁面圖像如圖所示由以下關鍵(藍色方塊代表縮放窗口):
如果提供一個字符串,值將被用作一個選擇器來確定元素的確切位置和大小的頁面。 如果"inside"被指定,那么放大的圖像將會出現在頁面圖像內，從3.0增加到1303151613，你也可以設置成zoomOffsetX:0
|
3 |
|
zoomOffsetX
|
number | 允許您調整縮放窗口的水平位置。從3.0增加到1303151613並且在"inside"工作模式 |
15 |
| zoomOffsetY | number | 允許您調整縮放窗口的垂直位置。從3.0增加到1303151613並且在"inside"工作模式 |
0 |
| zoomFullSizeDEPRECATED (see zoomSizeMode) | boolean | 縮放窗口出現在全尺寸的放大圖像。 | false |
| zoomFlyOut | boolean | 將'flying'動畫打開或關閉 | true |
| zoomClass | string | 用於縮放窗口的css類 | cloudzoom-zoom |
| zoomSizeMode | srting | 定義了縮放窗口和鏡頭大小的規則。
|
lens |
| captionSource | string |
指定一個頁面中的HTML屬性圖像作為文本標題。或者,指定一個選擇器使用一些HTML內容的標題。
|
title |
| captionType | string | 指定標題類型,“attr”或“html” | attr |
| captionPosition | string | 標題的位置, "top" 或"bottom" | top |
| uriEscapeMethod | boolean | string |
指定要使用的JavaScript逃離方法,"escape"或“encodeURI”(false = no escaping) ，不推薦使用特殊字符或圖像路徑有空格
|
false |
| errorCallback | function | 指定一個函數當發生錯誤時調用。函數將會收到具有以下屬性的錯誤對象:
在調用CloudZoom.quickStart()之前可以設置一個全局錯誤處理程序，例如:
|
function(error){} |
| variableMagnification (from V3.0) | boolean | 是否允許變量放大 | true |
| startMagnification (from V3.0) | string|number | 初始放大(小圖像大小的乘數,不要給數字加引號)。“auto”將選擇最好的質量並基於大圖像尺寸放大。 |
auto |
| minMagnification (from V3.0) | string|number | 最低允許放大(小圖像大小的乘數)。“auto”將確保鏡頭尺寸不得大於小圖像。 |
auto |
| maxMagnification (from V3.0) | string|number | 最大允許放大(小圖像大小的乘數)。“auto”將選擇最好的質量基於大型圖像尺寸放大
|
auto |
| easing (from V3.0) | number | 數字越大，移動的越平滑越慢 | 8 |
| lazyLoadZoom (from V3.0 rev 1302181432) | blooean |
延遲加載的zoom圖像。如果這是真的,zoom圖像只會在最初圖像與小圖像交互之后被加載,否則將立即加載頁面加載。如果有許多需要加載的放大圖像延遲加載可能有用。
|
false |
| mouseTriggerEvent (from V3.0 rev 1302271415) | string | 鼠標事件用於觸發放大。使用“mousemove”或"click" | mousemove |
| disableZoom (from V3.0 rev 1303081245) | string|boolean |
使用禁用的zoom. false = no disable, true = disable always, "auto" = disable 只有zoom圖像是相同的大小或小於小圖像。注意,如果你有設置放大水平大於1,zoom不會被禁用。
|
false |
| galleryHoverDelay (from 3.0 rev 1304251647) | number | 使用galleryEvent:'mouseover'會推遲改變圖片數毫秒，阻止圖像加載請求瀏覽器造成的擁塞。 | 200 |
| permaZoom (from 3.0 rev 1308161049) |
boolean | 如果為真，當鼠標划離小圖時縮放窗口會保持打開狀態 | false |
| zoomWidth zoomHeight (from 3.0 rev 1311041015) |
number | 設置縮放窗口的寬度/高度，如果設置為"auto"則窗口寬度/高度與小圖片寬度/高度一致 | 0 |
| lensWidth lensHeight (from 3.0 rev 1311041015) |
number | 設置鏡頭的寬度/高度 | 0 |
