多媒体-网路电子相簿系统

多媒體-網路電子相簿系統F74942171林宇凡F74942066林江南程式建構•環境:WindowsXP•使用vs2005編輯•使用語言:asp.net2.0forc#•使用Access建立資料表單,儲存資料.•使用CSS和JS來幫助相簿美化.•測試方法:利用XP-IIS6來開啟網站.相簿首頁點選相簿分類裡的[風景照]~/albumCategory.aspx.cs•protectedvoidItem_Created(Objectsender,DataListItemEventArgse)•{AccessDataSourceads=newAccessDataSource();•ads.DataFile=~/App_data/webData.mdb;•ads.SelectCommand=“select*fromdefaultpagewhereca_id=”+Request.QueryString[“ca_id”]+“orderbyalbum_dateDESC”;//從defaultpage表單中按建立時間排序相簿•DataViewdv=(DataView)ads.Select(DataSourceSelectArguments.Empty);•intPageIndex=(Convert.ToInt32(Request.QueryString[Page])-1)*Convert.ToInt32(Request.QueryString[PageSize])+e.Item.ItemIndex;•if(!(Convert.ToString(dv[PageIndex][“FirstPic”])==“”))//判斷照片名稱是否存在•{System.Web.UI.WebControls.ImageIMG=(System.Web.UI.WebControls.Image)e.Item.FindControl(Image1);•IMG.ImageUrl=~/photos/+dv[PageIndex][FirstPic];•if(Convert.ToInt32(dv[PageIndex][FirstPicW])Convert.ToInt32(dv[PageIndex][FirstPicH]))•{//判斷高和寬的關係•IMG.CssClass=ls;•}else{•IMG.CssClass=pt;•}}•}Item_Created()•本函式目的在檢察顯示照片時需要直立或橫放，取出照片顯示於Imag1的控制項中(即albumCategory.aspx裡的標籤Image1)，我們判定當圖片高大於寬時，將IMag1的Css樣式設定為”pt”;若寬大於高時，設定為”ls”.•“ls”,”pt”的定義在style.css檔案中。進入相簿[其他]JS-Lightbox顯示相片JS-Lightbox顯示相片進入管理模式網站資訊介紹相簿分類管理管理相簿-檢閱建立動態DropDownList•在資料表單中每個相簿類別都有一個分類編號，如果使用者選取某一分類名稱，ex:[電影]，[電影]的分類編號是”1”,AccessDataSource1控制項會執行WHERE([ca_id]LINK“1”)而取出此分所有相簿資料。管理相簿-新增/刪除相片在類別中新增一個相簿資料庫使用-AccessVS2005中拉資料連結工具在程式碼中的語法JSLightbox2觀看照片特效HowtoUsePart1–Setup•Lightbox2usesthePrototypeFrameworkandScriptaculousEffectsLibrary.YouwillneedtoincludethesethreeJavascriptfilesinyourheader(inthisorder).scripttype=text/javascriptsrc=js/prototype.js/scriptscripttype=text/javascriptsrc=js/scriptaculous.js?load=effects,builder/scriptscripttype=text/javascriptsrc=js/lightbox.js/script•IncludetheLightboxCSSfile(orappendyouractivestylesheetwiththeLightboxstyles).linkrel=stylesheethref=css/lightbox.csstype=text/cssmedia=screen/•ChecktheCSSandmakesurethereferencedprev.gifandnext.giffilesareintherightlocation.Also,makesuretheloading.gifandclose.giffilesasreferencednearthetopofthelightbox.jsfileareintherightlocation.Part2–Activate•Addarel=lightboxattributetoanylinktagtoactivatethelightbox.Forexample:ahref=images/image-1.jpgrel=lightboxtitle=mycaptionimage#1/a•Optional:Usethetitleattributeifyouwanttoshowacaption.•Ifyouhaveasetofrelatedimagesthatyouwouldliketogroup,followsteponebutadditionallyincludeagroupnamebetweensquarebracketsintherelattribute.Forexample:ahref=images/image-1.jpgrel=lightbox[roadtrip]image#1/aahref=images/image-2.jpgrel=lightbox[roadtrip]image#2/aahref=images/image-3.jpgrel=lightbox[roadtrip]image#3/a•Nolimitstothenumberofimagesetsperpageorhowmanyimagesareallowedineachset.Gonuts!Lightbox2觀看照片效果•End