Por favor revisa mi código. Casi funciona, pero cada vez que hago clic en una de las miniaturas, no muestra la imagen.
<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>Aquí hay un ejemplo de trabajo, lo que hice, pasé el pulgar como img src. y paso la url img del tamaño original, como argumento de la función.
luego, dentro de la función, simplemente paso la URL de img a la etiqueta img.
<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>Lo siento por las URL largas de img. puedes reemplazarlos por otros más cortos, por supuesto.