如何读取存储在图像的data-src中的URL并在另一个img控制器的src中设置该URL？

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;

}