在使用Kentico CMS進行網站內容建設的時候，你是否希望有這樣的效果：當用戶在你的網上商店瀏覽圖像時，用戶只要在圖像區域移動光標，圖像就隨之出現放大或縮小的畫面，從而可以看清更多的細節？通過下面簡單的幾步，你就可以做到：
一、複製以下腳本到你的母版頁的<head>部分，即CMS Desk -> Content -> <root document> -> Master page 下面並保存它。注意該腳本引用了兩個文件——multizoom.css和multizoom.js，所以一定要確保路徑設置正確無誤。點擊jQuery Zoom Image Script下載這兩個文件壓縮包。
<pre class="brush: js;"><link rel="stylesheet" href="multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#p_w_picpath1').addp_w_picpathzoom({ // single p_w_picpath zoom
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largep_w_picpath: 'hayden.jpg' //<-- No comma after last option!
})
$('#p_w_picpath2').addp_w_picpathzoom() // single p_w_picpath zoom with default options
$('#multizoom1').addp_w_picpathzoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addp_w_picpathzoom unless noted as '- new'
descArea: '#description', // description selector (optional - but required if descriptions are used) - new
speed: 1500, // duration of fade in for new zoomable p_w_picpaths (in milliseconds, optional) - new
descpos: true, // if set to true - description position follows p_w_picpath position at a set distance, defaults to false (optional) - new
p_w_picpathvertcenter: true, // zoomable p_w_picpath centers vertically in its container (optional) - new
magvertcenter: true, // magnified area centers vertically in relation to the zoomable p_w_picpath (optional) - new
zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true //<-- No comma after last option!
});
$('#multizoom2').addp_w_picpathzoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addp_w_picpathzoom unless noted as '- new'
descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
disablewheel: true // even without variable zoom, mousewheel will not shift p_w_picpath position while mouse is over p_w_picpath (optional) - new
//^-- No comma after last option!
});
})
<_/script></pre>
二、使用在上面代碼中你定義的jQuery選擇器爲圖像設置腳本。默認情況下，有4個選擇器可供選擇——‘p_w_picpath1’、‘p_w_picpath2’、‘multizoom1’、‘multizoom2’。圖像需要明確定義尺寸（寬度和高度），這樣就能確保腳本在任何時候都能依據原始圖像的比例正確調整放大圖像的大小。（選擇器可用的所有選項都可以在官方網站www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 上找到）。
（點擊查看大圖）
三、最後，你可能需要設置jQuery 到noConflict()模式使其能夠正常運作。
該腳本可以免費用於個人或商業網站。
關於Kentico CMS更多資訊，盡在http ://www.evget.com/product/238/resource#p