Estoy tratando de crear una galería que abra una gran imagen emergente o una imagen 'modal' cuando se hace clic en una imagen.
Estoy tratando de combinar el código de estos dos tutoriales:
https://www.w3schools.com/howto/howto_js_portfolio_filter.asp https://www.w3schools.com/howto/howto_css_modal_images.asp
Pasar el cursor sobre la imagen hace que se desvanezca un poco, pero hacer clic no hace absolutamente nada.
Aquí hay una parte de mi código.
HTML:
<div class="column 1"> <div class="content"> <img id ="myImg" src="path.png" alt="img" style="width:40%"> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> </div>JS:
var img = document.getElementById("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick() = function(){ console.log('click') modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; }No se envía nada a la consola, ni siquiera mensajes de error.
Cualquier ayuda es muy apreciada.
Elimine el () del método onClick , para que su JavaScript se vea así:
var img = document.getElementById("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ console.log('click') modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } onClick es un atributo de un elemento DOM, no una función. Como tal, debe asignar la función anónima a la variable con la sintaxis de asignación de variables.