2015-03-30 33 views
1

我正在嘗試爲網站創建圖片庫。我正在使用Visual Studio 2013 Premium,並試圖使用Colorbox jQuery lightbox插件來顯示圖像。我有一個簡單的web表單工作的插件。現在我正試圖讓它與我的主代碼一起工作。它似乎主要通過將一個類(在本例中稱爲「group1」)應用於錨標記元素來工作。我創建了一個文件上傳控件,並將其設置爲在頁面上的面板中將上傳的圖像文件顯示爲圖像按鈕。加載頁面時,它會顯示面板中的任何圖像(當前位於「數據」文件夾中)。這一切工作正常。如何在每個動態創建的ImageButton周圍打包超鏈接? Visual Studio

我希望能夠點擊圖像按鈕,Colorbox插件將像以前一樣顯示它(用我的簡單示例,我將一個類應用到錨標籤)。但是,它不起作用。我認爲原因是我正在將該類應用於ImageButton,但不是錨標記。我曾嘗試下面的代碼:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.IO; 

namespace imageGalleryTest 
{ 
    public partial class WebForm1 : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      uploadImage(); 
     } 

     protected void Button1_Click(object sender, EventArgs e) 
     { 
      if (FileUpload1.HasFile) 
      { 
       string filename = FileUpload1.FileName; 
       FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Data/" + filename)); 
      } 
      Response.Redirect("~/WebForm1.aspx"); 
     } 

     private void uploadImage() 
     { 
      foreach (string strFileName in Directory.GetFiles(Server.MapPath("~/Data/"))) 
      { 
       ImageButton imageButton = new ImageButton(); 
       FileInfo fileInfo = new FileInfo(strFileName); 
       imageButton.ImageUrl = "~/Data/" + fileInfo.Name; 
       imageButton.Width = Unit.Pixel(100); 
       imageButton.Height = Unit.Pixel(100); 
       imageButton.Style.Add("padding", "5px"); 
       imageButton.Click += new ImageClickEventHandler(imageButton_Click); 
       //imageButton.CssClass = "group1"; 
       Panel1.Controls.Add(imageButton); 

      } 
     } 

     private void imageButton_Click(object sender, ImageClickEventArgs e) 
     { 
      Response.Redirect(((ImageButton)sender).ImageUrl); 
     } 
    } 
} 

現在,當我點擊圖像按鈕,它顯示的圖像與黑暗的背景,但不適用任何的彩盒影響到它。

我試圖在取消這條線,但它沒有幫助:

//imageButton.CssClass = "group1"; 

我試圖創建頁面上的超鏈接,並點擊圖像按鈕時,分配給圖像按鈕的圖像的URL的導航網址超鏈接。然後,當我點擊超鏈接時,它工作正常,並將Colorbox效果應用於圖像。

private void imageButton_Click(object sender, ImageClickEventArgs e) 
     { 
      HyperLink1.NavigateUrl = ((ImageButton)sender).ImageUrl; 
     } 

然後我試圖讓它自動地引導到圖像的URL,而無需點擊這個超鏈接:

private void imageButton_Click(object sender, ImageClickEventArgs e) 
     { 
      HyperLink1.NavigateUrl = ((ImageButton)sender).ImageUrl; 
      Response.Redirect(HyperLink1.NavigateUrl); 
     } 

但它沒有工作,它只是顯示的圖像與一前黑暗的背景。

我覺得如果我可以在每個圖像按鈕周圍包裹一個錨標籤並將所需的類應用到該錨標籤,那麼它可能會工作,但我不知道如何。

任何幫助非常感謝。

回答

0

我終於得到了這個工作的一種不同的方式,因爲我沒有任何運氣與上述代碼。我放棄了圖像按鈕,而是在後面的代碼中創建了一個包裹在img標籤周圍的超鏈接。因此,對於文件夾中的每個文件,它會創建一個圖像,並在其周圍添加一個錨標記,並將必要的類應用到該圖像。這工作得很好。

private void uploadImage() 
     { 
      string thumbnails = "<div id=\"photoThumbnailContainer\">"; 
      foreach (string strFileName in Directory.GetFiles(Server.MapPath("~/Data/"))) 
      {    
       FileInfo fileInfo = new FileInfo(strFileName); 
       thumbnails += "<a href=\"Data/" + fileInfo.Name + "\" class=\"group1\"><div class=\"thumbnails\"><img src=\"Data/" + fileInfo.Name + "\" height=\"200px\" width=\"200px\" /></div></a>"; 
      } 
      thumbnails += "</div>"; 
      lblImageThumbnails.Text = thumbnails; 
     } 
相關問題