2015-03-30 40 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; 
     } 
相关问题