2012-02-21 54 views
0

我正在图库允许可能性上传图像,该图像被产生并作为缩略图以及作为原始图像被存储。访问所选项目从中继

缩略图文件夹中的图片被列出,如果用户点击图像应显示在满量程一个缩略图和点击的缩略图应该得到一个边界,显示其缩略图,用户点击。

为了实现这一点,我使用中继器控制以及图像和超链接的控制。下面你可以看到我的代码在文件后面(文件的实际存储在一个单独的类中)。

它的工作原理,选择一个文件并上传:在文件中生成的缩略图和上传的图片在全尺寸显示。然而,有一些事情,我需要帮助:

  1. 如果一个缩略图点击是CSS类别应该被添加到缩略图(添加边框),这是我尝试用ItemRepeater_ItemCommand完成。这里的问题是,所有的缩略图都会得到这个类。我怎么能只选择点击缩略图?

  2. 我该如何编写超链接标记中的代码,以便在ID =“fullSizeImage”的图像控件中显示单击的缩略图,而不是显示在新页面上?

从后面的代码:

protected void Page_Load(object sender, EventArgs e) { 

     var directory = new DirectoryInfo(Gallery.PhysicalApplicationPath + "/Images");  
     var theFiles = directory.GetFiles(); 

     ImageRepeater.DataSource = theFiles; 
     ImageRepeater.DataBind(); 
    } 

    protected void ImageRepeater_ItemCommand(object source, RepeaterCommandEventArgs e) { 

     if (e.Item.ItemType == ListItemType.Item) { 
      var fi = e.Item.DataItem as FileInfo; 
      if (fi != null) { 
       var hyperLink = e.Item.FindControl("ImageHyperLink") as HyperLink; 
       if (hyperLink != null) { 
        hyperLink.CssClass = "border"; 
       } 
      } 
     } 
    } 

    protected void UploadButton_Click1(object sender, EventArgs e) { 
     if (ImageUpload.HasFile) { 
      var content = ImageUpload.FileContent; 
      var name = ImageUpload.FileName; 
      var image = Gallery.SaveImage(content, name); 

      fullSizeImage.ImageUrl = "Images/" + image; 
     } 
    } 

从Default.aspx的:

<asp:Image ID="fullSizeImage" runat="server" /> 

    <asp:Repeater ID="ImageRepeater" runat="server" DataSourceID="" 
     onitemcommand="ImageRepeater_ItemCommand"> 
     <ItemTemplate> 
      <asp:HyperLink ID="ImageHyperLink" runat="server" NavigateUrl='<%# Eval("Name", "~/Images/{0}") %>' > 
       <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>' CssClass="thumbnail" /> 
      </asp:HyperLink> 
     </ItemTemplate> 
    </asp:Repeater> 

提前感谢!

回答

2

为了您的缩略图的要求,你可以使用已选择切换到适当的CSS类图像的图像jQuery的点击处理程序;请参阅: http://api.jquery.com/click/另请参见toggleClass

为了显示完整大小的图像,我建议在超链接控件上使用返回false的JavaScript例程来设置虚拟href值(“#”);这是希望停止通常会导致浏览器遵循链接的事件冒泡过程。要显示更完整大小的图像,你可以使用HTML/CSS程序如下证明:http://www.wickham43.net/hoverpopups.php

0

可以使用ImageButton,然后用CommandArgumentCommandName财产。

<asp:ImageButton id="imagebutton1" runat="server" ImageUrl="images/pict.jpg" CommandName="Show" CommandArgument='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>/> 

在Repetar_ItemCommand事件,尝试这样

void ImageRepeater_ItemCommand(object sender, CommandEventArgs e) 
     { 
     if (e.CommandName == "Show") 
     { 
      //do some thing 

     } 
    }