views:

2397

answers:

2

Ok I have been working on this gallery for some time and I keep getting little tidbits. It is now time to finish it off. I have a datalist which binds to an array of *.aspx image urls that contain a thumbnail id that is sent through the url. I now need to implement an onclick event, that when a user clicks on a photo, it brings them to the actual picture.

example url:
(thumbnail) = ~/UserPages/Photo/GetThumbnail.aspx?id=7
(actualpic) = ~/UserPages/Photo/GetPhoto.aspx?id=7

What I need: How do i get it so that each photo has an onclick event? I tried adding onclick to the imag src but it didn't work. It is difficult because it is not an actual image control, they exist inside a datalist. I also need to know how to extract the thumbnail url when getting clicked so that I can grab the id and redirect to the actual picture. Help please!

<asp:DataList ID="dlImages" runat="server" 
    RepeatColumns="5" 
    RepeatDirection="Horizontal" 
    RepeatLayout="Flow">

    <ItemTemplate>
        <img src="<%# ResolveUrl((string)Container.DataItem) %>" />
    </ItemTemplate>

</asp:DataList>

Code Behind:

dlImages.DataSource = ImageUrls;
dlImages.DataBind();
+1  A: 

Can you wrap it in an a tag?

<ItemTemplate>
    <a href="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetPhoto.aspx?id={0}", Container.DataItem)) %>"><img src="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetThumbnail.aspx?id={0}", Container.DataItem)) %>" /></a>
</ItemTemplate>

This assumes your DataItem contains only the ID.

John Rasch
Wow...I would have never figured that out. Thank you! I don't know what I would do without this site. Thank you again!
A: 

Try:

<ItemTemplate>
    <img src="<%# ResolveUrl((string)Container.DataItem) %>" onclick="doSomething(this)" />
</ItemTemplate>

After that you can simply implement a doSomething function that parses the id out of "this.src" and do whatever you want with it.

SirDemon