Get all images from a div ID and add links

javascript innerhtml

17,497

Solution 1

You are assigning innerHTML in each loop without concatenating the existing HTML.

Change:

getDivId.innerHTML = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";

getDivId.innerHTML += "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";

Solution 2

Um... you're actually attempting to grab an object property from an array, which doesn't exist:

var images = getDivId.getElementsByTagName("img").innerHTML;

Should be changed to:

var images = getDivId.getElementsByTagName("img");

17,497

Author by

Breno

Updated on June 22, 2022

Comments

Breno almost 2 years

I am having some difficulties building a javascript that gets all the images from a div ID, and add a link to the big image on each of the thumbnails. Here is my code.

 <html>
 <head>
 <script>
        function addGallery(){
            var getDivId = document.getElementById("imgContainer");
            var images = getDivId.getElementsByTagName("img").innerHTML;
            for(var i=0; i<images.length; i++) {
                getDivId.innerHtml = "<a id='g2Image' href='big/" + images[i].src + "'>" + images[i].src + "</a>";
            }
        }    
    </script>
 </head>
 <body onload='addGallery()'>
 <div id="imgContainer">
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 <img src="/images/galleries/img1.jpg" alt="" width="125" height="100" />
 </div>
 </body>
 </html>

Thank you in advance! Regards.

Brian Stinar almost 13 years

Are you sure you want to do this in Javascript? When I have done things like this before, it's because I lack access to the server-side development environment. After reading through this, it seems like it might be cleaner to do this on the server side (if possible.)

John Green almost 13 years

I'm not sure I get your answer (and attempting to not be a jerk about it)... He has to modify the DOM (or use a straight JS event), since he's attempting to add an anchor on top of the images that already exist. Really, this should be done server-side, but I think we can ignore that for now.
RobG almost 13 years

Sorry, missed the added links part—answer updated. Yes, should be a server-side thing but sometimes people have to try stuff client side before they get the point. :-)
Breno almost 13 years

Thank you for your help! I added now the link to each image, but I need to add a id and onclick event on each link, so I am stuck again... About the server-side solution, that would be great, if this wasn't a hosted CMS and no access to add php code. Anyway, if there is a better solution in PHP, whould you mind to expose that for us? Regards!