將fancybox目錄下的jquery.fancybox-1.3.4.pack.js及jquery.mousewheel-3.0.4.pack.js複製到範例站台下的Scripts目錄，css部份將fancybox目錄下的jquery.fancybox-1.3.4.css複製到範例站台下的Styles目錄，圖檔部份則將fancybox目錄下的圖檔全部複製到範例站台下的Image目錄，因為圖檔的位置已變更，所以我們必須修改jquery.fancybox-1.3.4.css，修改分為二個部份，第一個針對url增加../Image/
例如 url('fancybox.png')改為url('../Image/fancybox.png')
主要是以css檔案位置的相對路徑來寫，第二個部份是針對css檔內容含有MS專有濾鏡語法做修改，例如
{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
改成
{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Image/fancy_shadow_n.png', sizingMethod='scale'); }
這個部份是以html檔案位置的相關路徑來寫，修改完css內容部份後我們進行html程式碼撰寫，以下為程式碼範例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fancybox Demo</title>
<script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="Scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript">
$(document).ready(function () {
$("#imgBluehills").fancybox({
'type': 'image',
'href': 'Blue hills.jpg'
});
$("#imgSunset").fancybox({
'type': 'image',
'href': 'ImagePhoto.ashx'
});
$("a[rel=imgGroup]").fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'titlePosition': 'over',
'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
</head>
<body>
<div style="text-align:center">
<img id="imgBluehills" src="Blue hills_s.jpg" />
<hr />
<img id="imgSunset" src="Sunset_s.jpg" />
<hr />
<a rel="imgGroup" href="Water lilies.jpg">
<img src="Water lilies_s.jpg" />
</a>
<a rel="imgGroup" href="Winter.jpg">
<img src="Winter_s.jpg" />
</a>
</div>
</body>
</html>
網頁呈現部份主要區分為三個部份，第一個部份是點撃縮圖(Blue hills_s.jpg)，顯示儲放在Web app根目錄下的Blue hills.jpg圖檔，第二個部份是點撃縮圖(Sunset_s.jpg)，利用Generic Handler(.ashx)取得圖檔，可利用在圖檔存放位置與網頁不同空間時，例如圖檔放在NAS空間，第三個部份將多張圖片以幻燈片效果顯示。
詳盡內容可參考以下連結
沒有留言:
張貼留言