1

I'm trying to create an images on the page to represent thumbnails, however my current code only shows the last image on in the directory. How do I make the for loop create a new image on my page each time it iterates.

<img id="tpic" src="http://example.net/test%20page/001.jpg" width="20%" height="20%">

<script type="text/javascript">
var y = 1;
var picurl2 = "http://example.net/test%20page/00"+y+".jpg";
document.getElementById("tpic").src=picurl2;
document.getElementById("divThumb").innerHTML = document.getElementById("pic2").src;

for (y = 1; y < 18; y++)
{
  if (y<10){
    picurl2 = "http://example.net/test%20page/00"+y+".jpg";
  }
else{
   picurl2 = "http://example.net/test%20page%20/0"+y+".jpg";
 }

  document.getElementById("tpic").src=picurl2;

}

</script>
Ray Raja
  • 13
  • 7
  • ignore the document.getElementById("divThumb").innerHTML = document.getElementById("pic2").src. – Ray Raja Apr 17 '15 at 15:30
  • It appears that you are updating the image source to the same ID, so naturally, the sources ARE changing, but it happens so quickly that it appears to only show the last image in the iteration because thats where it stops. Do you want to general all image thumbnails at once, or do you want to CYCLE through the image thumbnails in that same Div with there being some kind of pause or transition as its shown? – maiko Apr 17 '15 at 15:45
  • Try adding new ``'s with the help of these functions: http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library – frhd Apr 17 '15 at 15:46

3 Answers3

2

Make an array to hold all of your images. 

var imgs = ["one.jpg", "two.jpg", "three.jpg"];

Loop through the array and add a new image to the page for each image in the array 

for(i = 0; i < imgs.length; i++)
{
    document.getElementById("placeholder").innerHTML += "<img src='"+ imgs[i] + "' class='images'></img>";
}

Full code here

piggy
  • 365
  • 3
  • 19
1

You could simply use document.createElement() in your for loop to create the images and append their src attributes like this:

for (y = 1; y < 18; y++) {
    var img = document.createElement("img");
    if (y < 10) {
        img.src = "http://example.net/test%20page/00" + y + ".jpg";
    } else {
        img.src = "http://example.net/test%20page%20/0" + y + ".jpg";
    }

    document.body.appendChild(img);
}

Here's a DEMO fiddle.

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
0

Here is an example:

<div id="placehere"></div>
<script type="text/javascript">
  function isIE() {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
  }

  function createImg(src, width, height) {
    var img = isIE() ? new Image() : document.createElement('img');
    img.src = src;
    if (width != null) img.style.width = width;
    if (height != null) img.style.height = height;
    return img;
  }

  for (y = 1; y < 18; y++) {
    var picurl2;
    if (y < 10) {
      picurl2 = "http://example.net/test%20page/00" + y + ".jpg";
    } else {
      picurl2 = "http://example.net/test%20page%20/0" + y + ".jpg";
    }
    document.getElementById("placehere").appendChild(createImg(picurl2, "20%", "20%"));
  }
</script>
Eddie Moojen
  • 1