2012-02-21 70 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 

     } 
    }