因為使用者的需求改變希望在點選圖片時，能有
AjaxControlToolkit裡的
ModalPopup效果，這裡我使用Fancybox達成使用者需求，以下為使用心得的整理，首先我們先下載
Fancybox，下載解壓縮後會有個fancybox目錄，目錄裡存放的是fancybox所使用的js檔、css檔及相關圖檔，我們必須將這些引用到我們的站台才能使用fancybox的特效，但通常我們的站台目錄結構會將js檔、css檔及圖檔分別存放在不同的目錄，以下為我範例站台的目錄結構
將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空間，第三個部份將多張圖片以幻燈片效果顯示。
詳盡內容可參考以下連結
我們以Microsoft.ReportViewer.Common目錄為例，切換至Microsoft.ReportViewer.Common目錄後，可以看見二個目錄，以10開頭的目錄為ReportViewer 10，以8開頭的目錄為ReportViewer 8
由於我們使用的是ReportViewer 10，所以我們只要將10.0.0.0__b03f5f7f11d50a3a目錄下的dll檔複製到ASP.NET應用程式的Bin目錄下即可，其餘11個目錄以此類推。
