Jan 30 2007

ASP.NET hoverextender to create a live.com image search like gui part 1

Posted by admin under ASP.NET AJAX formally Atlas

Thie will be a sort of Ajax solution - no worry - but the first thing I want to show you is simply how effective CSS can be.

In short we are gonna create a GUI looking like the one found on Live.com - example

See the hovering effect? That's cool and since I needed to create such an effect for a project I am (still) working on - I decided to try to mimic it.

The basics

I started by simple feeding the images into a repeater:



        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                System.IO.DirectoryInfo oInfo = new System.IO.DirectoryInfo(Server.MapPath("~/theimages"));
                rptImages.DataSource = oInfo.GetFiles( "*.png");
                rptImages.DataBind();
            }
        }

This will feed all png files inside the "theimages" directory

to the repeater. The repeater HTML code looking like this:



    <asp:Repeater ID="rptImages" runat="server" OnItemDataBound="rptImages_ItemDataBound">
    <HeaderTemplate><div class="imagecontainer"></HeaderTemplate>
    <ItemTemplate>
        <DIV class="oneimage" runat="server" id="oneimage">
            <asp:Image runat="server" ID="img"  Width="150px" Height="110px" />
        </DIV>
    </ItemTemplate>
    <FooterTemplate></div></FooterTemplate>
    </asp:Repeater>

The databound event then just sets the imageurl of each image:



        protected void rptImages_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                System.IO.FileInfo oInfo = e.Item.DataItem as System.IO.FileInfo;
                Image oImg = e.Item.FindControl("img") as Image;
                oImg.ImageUrl =  ResolveClientUrl("~/theimages/" +  oInfo.Name );
            }
        }

Which renders all the images like this: