溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
在使用Kentico CMS進行網(wǎng)站內(nèi)容建設(shè)的時候，你是否希望有這樣的效果：當用戶在你的網(wǎng)上商店瀏覽圖像時，用戶只要在圖像區(qū)域移動光標，圖像就隨之出現(xiàn)放大或縮小的畫面，從而可以看清更多的細節(jié)？通過下面簡單的幾步，你就可以做到：
一、復(fù)制以下腳本到你的母版頁的<head>部分，即CMS Desk -> Content -> <root document> -> Master page 下面并保存它。注意該腳本引用了兩個文件——multizoom.css和multizoom.js，所以一定要確保路徑設(shè)置正確無誤。點擊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選擇器為圖像設(shè)置腳本。默認情況下，有4個選擇器可供選擇——‘p_w_picpath2’、‘p_w_picpath3’、‘multizoom1’、‘multizoom2’。圖像需要明確定義尺寸（寬度和高度），這樣就能確保腳本在任何時候都能依據(jù)原始圖像的比例正確調(diào)整放大圖像的大小。（選擇器可用的所有選項都可以在官方網(wǎng)站www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 上找到）。
（點擊查看大圖）
三、最后，你可能需要設(shè)置jQuery 到noConflict()模式使其能夠正常運作。
該腳本可以免費用于個人或商業(yè)網(wǎng)站。
關(guān)于Kentico CMS更多資訊，盡在http ://www.evget.com/product/238/resource#p
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
