List with images from code behind (ASP.NET C#) to image overview in ASPX [closed]

Question

I am rather new to ASP and C#, and I would like to learn how I can solve the following two problems:

1. In the Code Behind I have a list with images (from database). I would like to show these images on the ASPX page. I was wondering what is the best/easiest way to allow an ASPX page to access lists from the code behind. The tutorials about this subject are a bit confusing to me.

2. The second question I have is about a nice JQuery gallery. Pretty much all the plugins I can find are some kind of slider, which is not what I am looking for. The ideal plugin should show all (thumbnail) images on a page, and should contain next and previous buttons. It would also be nice if the name of an image could be shown after hovering your mouse cursor over the image.

Hopefully someone can answer my questions,

Thanks in advance

Answer 1

Question 1

You can use a gridview to display the images, not sure exactly what type of list you have in your code behind so I've created a simple List<Images> where Images is a class with two properties Name and URL, but I trust you can change the code accordingly to work with your list:

ASPX:

<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:ImageField DataImageUrlField="URL" HeaderText="Image" 
        ControlStyle-Height="150" ControlStyle-Width="120" />
    </Columns>
</asp:GridView>

Code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        List<Image> images = new List<Image>
        {
            new Image("Picture 1","~/Images/Pic1.jpg"),
            new Image("Picture 2","~/Images/Pic2.jpg"),
        };

        gvImages.DataSource = images;
        gvImages.DataBind();
    }
}

public class Image
{
    public Image(string name, string url)
    {
        this.name = name;
        this.url = url;
    }

    private string name;
    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    private string url;
    public string URL
    {
        get { return url; }
        set { url = value; }
    }
}

Question 2

Have a look at jQuery Galleria it has functionality to list all the thumbnails as well as the next and previous buttons.And if you want to display the name or any other description of the image when hovering over the image just change the title HTML attribute to the desired value: