JavaScript thumbnail image gallery

Question

Please check my code. It is almost working but whenever i click one of the thumbnails it doesnt show image.

 <script> function thumbChange(num){ var thumb = "gata" + num + ".jpg"; document.getElementById("mainImg").src = thumb; } </script>

 <div class="main"> <img id="mainImg" src="biokovo.jpg" /> </div> <ul class="thumbs"> <li onclick="thumbChange(0)"><img src="biokovo.jpg"></li> <li onclick="thumbChange(1)"><img src="grac.jpg"></li> <li onclick="thumbChange(2)"><img src="lokvica.jpg"></li> <li onclick="thumbChange(3)"><img src="hike.jpg"></li> <li onclick="thumbChange(4)"><img src="gradac.jpg"></li> </ul>

Answer 1

Here is a working example, what i did, i passed the thumb as the img src. and i pass the original size img url, as the argument of the function.

then inside the function im just passing the img url to the img tag.

 <img id="mainImg" src="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1"> </div> <ul class="thumbs"> <li onclick='thumbChange("https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> <li onclick='thumbChange("https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> <li onclick='thumbChange("https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> </ul> <script> function thumbChange(img){ document.getElementById("mainImg").src = img; } </script>

im sorry for the long img urls. you can replace them with shorter ones ofcourse.