Display image in a div like image gallery

Question

I want to display a selected image from table rows inside a div. i am using a for loop to populate the table but now i find it hard to display the selected image inside the div as the id's are dynamic. Here is my for loop

for (i=1; i < my_image.length-1; i++) {

            if (i%3==0) {

                str += "<td><a 

href='"+my_image[i]+"'onclick='displayimg()'id=/image"+my_image[i] +"/"+" class='popup-

open'><img src='"+my_image[i]+"'"+

                "width='80' height='65'></a></td></tr><tr>";

            }

            else {

                str+= "<td><a href='"+my_image[i]+"'class='popup-open'><img src=' 

"+my_image[i]+

"' width='80' height='65'></a></td>";

            }
        }

how can i display these image in a div content on user click.

Answer 1

If i understand you correctly, the table will have unique Ids that are dynamic, but the div will be static and will hold whichever image is selected, much like a larger view of the image that is clicked?

If so, try this...

For the javascript try this code:

function showImage(container, image)
{
    var imageTag = document.getElementById(container);
    imageTag.src = image;
}

In the table you're making, for the onclick method in the tag

<img onclick="showImage('IDofTheImageTagToRenderImage', this.getAttribute('src')" />

with that you don't need to know which Id holds the image, you only need to have the src information and can pass that to a javascript method to populate the div's image tag that you want to show the selected image. Since (to my understanding) that would be a static Id value for that div, and not a dynamically generated one.

If you are placing this in a popup div, i have something for that also and can modify the answer to fit.