How can I display the full image a when user clicks the thumbnail image ASP.NET

Question

I have created a program that finds images stored locally and displays them on the site. However, I noticed when i just re-size the original images and use them as thumbs the loading time is ridiculous because the actual images are quite large.
I have a folder that stores these images as thumbs with the same names as the original files, how can i get it to load the original file when the thumb is clicked, because right now its loading only the thumb or the full image based on the "onclick" i put into the JS.

      < script type = "text/javascript" >
       function Test(url) {
         var img = new Image();
         var bgDiv = document.getElementById("divBackground");
         var imgDiv = document.getElementById("divImage");
         var displayFull = document.getElementById("displayFull");
         var imgLoader = document.getElementById("imgLoader");
         imgLoader.style.display = "block";
         img.onload = function() {
           displayFull.src = img.src;
           displayFull.style.display = "block";
           imgLoader.style.display = "none";
         };
         img.src = url;
         var width = document.body.clientWidth;
         imgDiv.style.display = "block";
         bgDiv.style.display = "block";
         return false;
       } < /script>

<Nodes>
  <asp:TreeNode Text="Niagara Frontier" Value="Niagara Frontier" Expanded="False" SelectAction="Expand">
    <%--<asp:TreeNode Text="2006" Value="2006" Selected="True"></asp:TreeNode>--%>
  <asp:TreeNode Text="2006" Value="2006"></asp:TreeNode>
  <asp:TreeNode Text="2007" Value="2007"></asp:TreeNode>
  <asp:TreeNode Text="2008" Value="2008"></asp:TreeNode>
  </asp:TreeNode>
  <asp:TreeNode Text="Strabag Office Picture folder" Value="Strabag Office Picture folder" SelectAction="Expand"></asp:TreeNode>
</Nodes>


<asp:Repeater ID="RepeaterImages" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test(this.src)" Visible="False" />
  </ItemTemplate>
</asp:Repeater>

<asp:Repeater ID="RepeaterThumbs" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test2(this.src)" Visible="True" />
  </ItemTemplate>
</asp:Repeater>

    protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        string textVal = TreeView1.SelectedNode.Text;

        RepeaterImages.Visible = true;
        string[] img = Directory.GetFiles(Server.MapPath("~/Images/" + textVal));
        List<String> images = new List<string>(img.Count());

        foreach (string item in img)
        {
            images.Add(String.Format("~/Images/" + textVal + "/{0}", System.IO.Path.GetFileName(item)));
        }

        RepeaterImages.DataSource = images;
        RepeaterImages.DataBind();

        RepeaterThumbs.Visible = true;
        string[] imgthumb = Directory.GetFiles(Server.MapPath("~/Images/Thumbs/" + textVal));
        List<String> imagesthumb = new List<string>(imgthumb.Count());

        foreach (string item2 in imgthumb)
        {
            imagesthumb.Add(String.Format("~/Images/Thumbs/" + textVal + "/{0}", System.IO.Path.GetFileName(item2)));
        }

        RepeaterThumbs.DataSource = imagesthumb;
        RepeaterThumbs.DataBind();
    }

Possible duplicate of [Programmatically change the src of an img tag](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — Adam Buchanan Smith, Dec 29 '15 at 17:23
@AdamBuchananSmith my problem is a little more complex than what i'm looking at on this post. My pictures are not actually coming from getelementby... take a look at the asp:imagebutton then my img.src in the java — rychrist88, Dec 29 '15 at 19:54

score 1 · Accepted Answer · answered Dec 31 '15 at 01:18

I solved it by using the JS the cut out the the part of the image reference that pointed to the thumb image. The JS now points to the root Images folder and loads those images on click.

        function Test2(url) {
            var img = new Image();
            var bgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var displayFull = document.getElementById("displayFull");
            var imgLoader = document.getElementById("imgLoader");
            imgLoader.style.display = "block";
            img.onload = function() {
              displayFull.src = img.src.replace("Thumbs/", ""); <--- Here
              displayFull.style.display = "block";
              imgLoader.style.display = "none";
            };

img.src = url;

score 0 · Answer 2 · answered Dec 30 '15 at 16:04

The source for the full image is wrong. You are setting it to the source of the thumbnail, which is what is being shown. You need to grab the file name from the thumb and then use the correct path for the full image. You state that the thumbs and full images are not in the same location so setting full to thumb source will only produce the thumb image again.

How can I display the full image a when user clicks the thumbnail image ASP.NET

2 Answers2