How to read URL which stored in a data-src of a image and set that URL in src of another img controller onclick?

Question

I am developing website by using ASP.net. In there in a page I am generating img controls by using this code for an image gallery.

  foreach (string url in listImageUrl)
            {
                LiteralControl lit = new LiteralControl();
                lit.Text = String.Format("<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='imgThumbnail' onclick='loadFullImage(this)'/>", url);

                pnlThumbnailImage.Controls.Add(lit);
            }

Then I am adding pnlThumbnailImage to placeholder in my page.

Also there is an another img controll in page. It goes like this.

<img id="imgFull" src="" />

What I want to do is when an user click above thumbnail images the Full image path which stored in "data-url=" should be apply to src of the imgFull control(another img controller).

So how to do that in javascript?

I wrote this javascript function. But it didn't work.

function loadFullImage(ctrl)
{
    var image = document.getElementById(ctrl);

    var imgFull = document.getElementById("imgFull");
    imgFull.src = image.getAttribute("data-url");

}

Thank you.

Answer 1

The ctrl parameter inside the loadFullImage() function is not the id of the image element but the HTML DOM element that was clicked on itself. Therefore, your code should be like this:

function loadFullImage(ctrl)
{
    var url = ctrl.getAttribute('data-url');

    var imgFull = document.getElementById("imgFull");
    imgFull.src = url;

}