Member Avatar for stereoworld

Ello,

Firstly let me preface this with the fact that I'm absolutely hopeless at ASP.net. I know the basics, but that's it.

Right, I'm trying to fix a property site coded in ASP.net. On the property landing page, there is a small gallery of thumbnail images below a larger one (image is at bottom)

What's supposed to happen is that the large image changes on click. Except it doesn't. And I can't work out why it won't.

Even my php laced brain can see that the below code should work:

So this is from the Property details aspx page.

                                    <asp:DataList ID="dlPropertyPictures" runat="server"  RepeatColumns="4"
                                        DataSourceID="sdsPropertyPictures">
                                        <ItemTemplate>
                                            <br />

                                            <asp:ImageButton ID="imgSmall" runat="server" Height="50px" Width="50px" ImageUrl='<%# Eval("pic") %>' 
                                                onclick="imgSmall_Click"  />

                                        </ItemTemplate>
                                        <FooterTemplate>
                                        </FooterTemplate>
                                    </asp:DataList>

And the aspx.cs file has the following in:

    Protected Sub imgSmall_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) 
        imgLarge.ImageUrl = sender.ImageUrl
        End Sub

Yeah, so I don't get any error or anything. Nothing in the firebug console either. It's really weird.

I'm readying myself for abuse if I've missed something really simple, which I probably have.

Thanks,
Tom

bah

  • 3 Contributors
  • 2 Replies
  • 276 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ZeroZen

Dani AI

Generated

Quick diagnosis and two safe fixes (client-side and server-side), plus common pitfalls.

As hinted, the simplest and fastest user experience is to swap the big image purely on the client so no postback is required. Give thumbnails a data attribute with the full-image URL (or a shared CSS class) and let a small script change the main <img> src on click.

<!-- rendered HTML example -->
<img id="mainImage" src="/images/placeholder.jpg" alt="main image">

<!-- thumbnails should include the full-size URL in a data attribute -->
<img class="thumb" data-full="/images/large1.jpg" src="/images/thumb1.jpg">
<img class="thumb" data-full="/images/large2.jpg" src="/images/thumb2.jpg">

<script>
document.addEventListener('click', function(e){
  var t = e.target;
  if (t && t.classList && t.classList.contains('thumb')) {
    document.getElementById('mainImage').src = t.getAttribute('data-full') || t.src;
  }
});
</script>

If server-side handling is required, prefer the DataList ItemCommand pattern rather than trying to read ImageButton properties directly from the sender. Also ensure the DataList is not rebound on every postback (bind only when Not IsPostBack) and that the large image control is a server control (runat="server").

' ImageButton: CommandName="Show" CommandArgument='<%# Eval("pic") %>'
Protected Sub dlPropertyPictures_ItemCommand(ByVal source As Object, ByVal e As DataListCommandEventArgs) Handles dlPropertyPictures.ItemCommand
    If e.CommandName = "Show" Then
        imgLarge.ImageUrl = e.CommandArgument.ToString()
    End If
End Sub

A few diagnostics: use the browser Network tab to see whether a POST happens when a thumbnail is clicked (no POST = no server event). Note that ImageButton does not use an AutoPostBack property (AutoPostBack applies to other controls) — ImageButton clicks post back by default. If partial postbacks are used (UpdatePanel), check triggers and binding behavior.

Recommended Answers

All 2 Replies

Member Avatar for Philippe.Lahaie

the vb.net code only gets executed on server side, if you want to do anything dynamic, like changing the big picture, it will have to be done with javascript typically, althought there are versions of such galleries in pure css.

i might be wrong but from a quick look at your code that's the first thing that comes to my mind!

Member Avatar for ZeroZen

Hello Stereoworld

Have you tried enabling "AutoPostBack = True" on the images?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.