Question

I have some bulk images inside DIV tag and If I click an image inside this DIV tag I need to display that Image in Image control.

Here is my response where I am displaying all the bulk images:

<script>
      $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
</script>

Now If I click an image inside the above DIV the selected image should be displayed inside this Image control

<asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None" 
                                Height="624px" Width="500px" />

Answer 1

I guess you’re creating a kind of Gallery application, or something like that, and AMAIK from your post, you want to show the large image, on click on its thumbnail.

Then my suggestion is to set the src attribute of the Image control at client-side, so that browser sends an HTTP GET request to get the image.

So, I recommend that you follow these steps:

1. For each thumbnail, add a custom attribute like data-large-image-url and set its value to the link to the large image of the thumbnail.
2. See what is the rendered result of ASP.NET’s Image control and find it using jQuery (you can use ClientIDMode='Static' to be more productive)
3. On click of each thumbnail, simply set the src attribute of the value of large image to the data-large-image-url attribute.

---

  $('#thumbnails').click(function(){
      $('#large-image').attr('src', $(this).attr('data-large-image-url'));
  });