http://event.starswok.com/movie/lastchanceharvey/album.aspx
這頁的效果就是我用AjaxControlToolkit做出來的。
因為我太會寫javascript，也不會jquery。所以想要有這頁的特效~~跟本不可能!!
所以只好~~硬做!!使用我最會用的ASP.NET的AjaxControl去用出差不多的特效。
心得分享....將兩個AjaxControl的特效做結合出來。而且圖還是從資料庫抓出來!!
這邊是java~~會被當掉~~頭尾我就拿掉了~~你們自已寫吧
function onSlideChanging(sender, args)
{
// 取得相片總數
if (!totalSlides)
var totalSlides = sender._slides.length;
// 目前播放的相片索引值
var currentSlideIndex = args.get_slideIndex();
// 「上一張」按鈕
var previous = $get("btnPrevious");
// 「下一張」按鈕
var next = $get("btnNext");
// 隱藏或顯示上一張、下一張按鈕
previous.style.visibility = (currentSlideIndex > 0) ?
"visible" : "hidden";
next.style.visibility = (currentSlideIndex < totalSlides - 1) ?
"visible" : "hidden";
// 相片說明與頁數
$get("description").innerHTML =
sender._slides[currentSlideIndex].ImagePath;
$get("pager").innerHTML = "<i>頁次：</i><font color='red'>" +
(currentSlideIndex + 1) + " / " + totalSlides + "</font>";
}
在來是用~~asp的image做縮圖~~把ajax加在圖上!!
<asp:Image ID="Image2" runat="server" ImageUrl ='<%# Eval("xxxxx") %>' CssClass="album_simg" />
<%-- 強制回應彈出式方塊（ModalPopup）的容器 --%>
<asp:Panel ID="panModalPopup" runat="server" style="display:none " >
<%-- 強制回應彈出式方塊可拖曳的地方 --%>
<asp:LinkButton ID="lnkbtnClose" runat="server" CssClass="close"
ToolTip="關閉"
OnClientClick=
"$find('ModalPopupExtender1').hide(); return false;" />
下面是版面設定。
<div style="text-align: center">
<table>
<tr>
<td>
<asp:ImageButton ID="btnPrevious" runat="server" ImageUrl="~/App_Themes/image/l.png" Text="◀" ToolTip="上一張" />
</td>
<td>
<asp:Image ID="Image1" runat="server" CssClass="album_img" />
</td>
<td>
<asp:ImageButton ID="btnNext" runat="server" ImageUrl="~/App_Themes/image/r.png" Text="▶" ToolTip="下一張" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<table width="100%">
<tr>
<td>
<asp:Label ID="description" runat="server" />
</td>
<td align="right">
<asp:Label ID="pager" runat="server" />
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
上面這邊只是版面的設定~~可以用自已的方法!!
下面這個就是用ajaxToolkit的相簿的功能~~換圖。
<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server"
TargetControlID="Image1" SlideShowServiceMethod="GetSlides"
AutoPlay="False" NextButtonID="btnNext"
PreviousButtonID="btnPrevious" Loop="true"
PlayInterval="5000" />
</div>
</asp:Panel>
這裡就是用ajaxToolkit的強制回應視窗~
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="Image2" PopupControlID="panModalPopup"
BackgroundCssClass="cssModalBackground" DropShadow="True"
RepositionMode="RepositionOnWindowScroll"
/>
</td>
</tr>
</table>
只是在程式碼裡面要把~圖用給相簿
下面這個是用LINQ+DATESET的方法把圖全部先抓出來~~傳回相簿讓ajax去放。
<WebMethod(Description:="傳回相簿")> _
Public Shared Function GetSlides() As Slide()
Dim myDS As New DS()
'透過NewsTableAdapter將資料載入myDS.Employees的DataTable中
Dim NewsDS As New DSTableAdapters.xxxxxTableAdapter()
NewsDS.Fill(myDS.xxxxx)
Dim query = From N In myDS.xxxxx_
Select N.xxxxxNumber, N.xxxxxTitle, N.xxxxxFile
Dim Slides(query.Count - 1) As Slide
Dim imga(100) As String
Dim g As Integer = 0
For Each i In query
Dim _image As String
Dim _title As String
Dim _description As String
_image = i.albFile
_title = i.albTitle
_description = ""
Slides(g) = New Slide(_image, _title, _description)
g += 1
Next
Return Slides
End Function
以上兩個ajax的使用方法在~~章立民研究室所寫的書都有~~只是我把兩個功能合在一起用~~~
好書一本~~我到現在只學到二章0 0就覺得好難了~~可是~~很好用。推推推
留言列表
