溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用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_picpath2').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_picpath3').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_picpath2’、‘p_w_picpath3’、‘multizoom1’、‘multizoom2’。圖像需要明確定義尺寸（寬度和高度），這樣就能確保腳本在任何時候都能依據原始圖像的比例正確調整放大圖像的大小。（選擇器可用的所有選項都可以在官方網站www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 上找到）。
（點擊查看大圖）
三、最后，你可能需要設置jQuery 到noConflict()模式使其能夠正常運作。
該腳本可以免費用于個人或商業網站。
關于Kentico CMS更多資訊，盡在http ://www.evget.com/product/238/resource#p
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
