Creating an image gallery using asp.net and c#

Suggested Videos
Part 137 - Add images to slideshow using xml file
Part 138 - Add images to slideshow using database table
Part 139 - How to upload and download files using asp.net and c#



In this video, we will discuss creating an image gallery using asp.net and c#.  The images in the galley should be displayed as click-able thumbnails. Upon clicking the thumbnail, the user should be redirected to a page, where he can see the original image. Upon uploading an image, the image should be added to the gallery immediately. The output should be as shown below.




The images used in the demo can be found at the following link
http://windows.microsoft.com/en-GB/windows/wallpaper

Add "Data" folder to the project. This folder stores the uploaded images.

WebForm1.aspx
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Width="440px"
    BorderStyle="Dashed" BorderColor="#000066">
</asp:Panel>

WebForm1.aspx.cs
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        LoadImages();
    }

    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 LoadImages()
    {
        foreach (string strfile in Directory.GetFiles(Server.MapPath("~/Data")))
        {
            ImageButton imageButton = new ImageButton();
            FileInfo fi = new FileInfo(strfile);
            imageButton.ImageUrl = "~/Data/" + fi.Name;
            imageButton.Height = Unit.Pixel(100);
            imageButton.Style.Add("padding", "5px");
            imageButton.Width = Unit.Pixel(100);
            imageButton.Click += new ImageClickEventHandler(imageButton_Click);
            Panel1.Controls.Add(imageButton);
        }
    }

    protected void imageButton_Click(object sender, ImageClickEventArgs e)
    {
        Response.Redirect("WebForm2.aspx?ImageURL=" + 
            ((ImageButton)sender).ImageUrl);
    }
}

WebForm2.aspx
<asp:Button ID="Button2" Text="Back to Gallery" runat="server" onclick="Button1_Click" />
<br /><br />
<asp:Image ID="Image1" Width="800px" Height="550px" runat="server" />
<br /><br />
<asp:Button ID="Button1" Text="Back to Gallery" runat="server" onclick="Button1_Click" />

WebForm2.aspx.cs
public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Image1.ImageUrl = Request.QueryString["ImageURL"];
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("WebForm1.aspx");
    }
}

No comments

Related Posts:

• SQL FULL JOIN SQL FULL JOIN Keyword The FULL JOIN keyword return rows when there is a match in one of the tables. SQL FULL JOIN Syntax SELECT column_name(s) FR… Read More
• SQL JOIN table.reference tr.fixzebra { background-color: #F6F4F0; } table.reference th { background-color: #555555; border: 1px solid #555555; … Read More
• SQL INNER JOIN Keyword SQL INNER JOIN Keyword The INNER JOIN keyword returns rows when there is at least one match in both tables. SQL INNER JOIN Syntax SELECT column_n… Read More
• SQL RIGHT JOIN SQL RIGHT JOIN Keyword The RIGHT JOIN keyword returns all the rows from the right table (table_name2), even if there are no matches in the left tab… Read More
• sample code for call webservice using ajax in asp.net Here we call webservice using ajax update panal and javascript . We see also how an ASP.NET AJAX-enabled web service generates the JavaScript needed … Read More