Tengo dos DIV a la izquierda son imágenes en miniatura y a la derecha tengo una imagen. Estoy tratando de hacer clic en una imagen en el lado izquierdo y hacer que reemplace la imagen en el lado derecho. Actualmente, cuando selecciono una imagen en miniatura, aparece el indicador giratorio de que se ha llamado a la función, pero la imagen no está actualizada. ¿Se puede completar esto con javascript normal o se debe usar JQuery?
<script type="text/javascript"> // This function will display photos selected by user function showDirectory(){ var myFiles = document.getElementById("files"); for(var i=0;i<=myFiles.files.length; i++){ var x = myFiles.files[i].name; document.getElementById("demo1").innerHTML += "<img onclick='switchImage("+x+")' src='"+x+"' style='width:40px; height:40px; margin:5px'>" } } function switchImage(e){ document.getElementById("rightside").src=e; } </script> Mostrar archivos en el Directorio <div class="item" style="width: 70%; background-color: bisque; padding: 5px;"> <img id="rightside" src="RightSide.jpg" alt="Picture of " style="height: 720px; width:720px"> <p style="color: #000; text-align: right;">Slide1.jpg</p> </div> </div>Establecer el HTML interno de un elemento img no mostrará la imagen. Necesitas crear un enlace a la imagen para mostrarla.
<input type="file" id="files" multiple="" accept="image/*" onchange="showDirectory()"> <p id="demo1"></p> <img id="rightside" style="height:720px; width:720px"> function showDirectory(){ var myFiles = document.getElementById("files"); for(let i=0;i<=myFiles.files.length; i++){ let f = myFiles.files[i]; let e = document.createElement('img'); e.src = URL.createObjectURL(f); e.onclick = () => { document.getElementById("rightside").src = (window.URL || window.webkitURL).createObjectURL(f); }; document.getElementById("demo1").append(e); } }(Esto funciona en una página en blanco sobre: página en blanco con HTML mínimo)
Enlaces Útiles: