1

Tenho um código que pega todas as imagens de um diretório:

<script>

	var folder = "img/";
	$.ajax({
		url: folder,
		success: function (data) {
			$(data).find("a").attr("href", function (i, val) {
				if (val.match(/\.(jpe?g|png|gif)$/)) {
					$(".columns").append("<div class = 'column is-4' > <a data-target = 'modal_name'class = 'img-input'> <img id = 'img-card' src='" + folder + val + "'></a></div>");
				}
			});
		}
	});

</script>

E quando eu clico na imagem, abre uma janela modal, eu gostaria que ele abrisse essa modal com a imagem específica em que eu clico...há como? Não faço ideia.

1

1 Resposta 1

0

Não use o evento window.onload porque ele é assíncrono com o Ajax. Dentro dele você está tentando atribuir eventos de clique à imagens que só serão retornadas após o Ajax. desta forma, o result.onclick não achará as imagens no tempo de execução.

Altere o window.onload para uma função normal e chame-a após o retorno do Ajax.

Altere:

window.onload = () => {
   ...
}

para:

var Load = () => {
   document.querySelectorAll('[data-target]').forEach((result) => {
      result.onclick = (e) => {
         document.querySelector(".modal-card-body").innerHTML = e.target.outerHTML;
         let modal = document.getElementById(result.getAttribute('data-target'))
         modal.classList.toggle("is-active")
         modal.querySelector('.delete').onclick = () => { modal.classList.toggle("is-active") }
      }
   })
}

Veja que no result.onclick incluí um parâmetro (e) para pegar a imagem clicada e joga-la na modal com:

document.querySelector(".modal-card-body").innerHTML = e.target.outerHTML;

No Ajax, chame a função Load() no final do success:

var folder = "img/";
$.ajax({
   url: folder,
   success: function (data) {
      $(data).find("a").attr("href", function (i, val) {
         if (val.match(/\.(jpe?g|png|gif)$/)) {
            $(".columns").append("<div class = 'column is-4' > <a data-target = 'modal_name'class = 'img-input'> <img id = 'img-card' src='" + folder + val + "'></a></div>");
         }
      });
      Load();
   }
});
1
  • 1
    Muito obrigado! It works
    – wizard.js
    Commented 24/05/2018 às 0:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .