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>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.