0

Estoy obteniendo una serie de campos desde un JSon y los muestro en una ventana de información a un tamaño determinado. Uno de los campos es una imagen y me gustaría mostrarla más grande una vez que pinche sobre ella. En principio lo hice con un target, pero la verdad queda un poco mal abrir otra ventana. Pensé en una ventana modal, pero me encuentro con que no se como armar la modal desde el script.

Este es la ventana donde muestro la información, y donde quería pinchar en la imagen para abrir un modal que me la muestre en grande, la muestro en el div contINFO

<div id="infos">
    <i class="fa fa-times closeinfos" onclick="cerrarInfo('infos')"></i>
    <div class="container-all" id="contINFO"></div>
</div>

Los datos que obtengo del JSON lo hago del modo

var records = document.getElementById('contINFO');
records.innerHTML = '';
var html = '';
for (i=0; i<features.length; i++){
    if(features[i].get('_code') != null){
        records.innerHTML += '<div id="code" class="codes">' + features[i].get('code') + '</div>'
    }else{
        records.innerHTML += '';
    }
    if(features[i].get('imagen') !=null){
        //records.innerHTML += '<div style="width:100%;float:left;"><img id= "myIMG" class = "iob" src=' + features[i].get('imagen') + '></div>';
        records.innerHTML += '<div style="width:100%;float:left;"><a href="' + features[i].get('imagen') + '" target="_blank" onClick="window.open(this.href, this.target); return false;"><img id= "myIMG" class = "iob" src=' + features[i].get('imagen') + '></div>';
    }else{
        records.innerHTML += '<img class = "iobs" src=images/Imagen_dummie.jpg>';
    }

Hice alguna prueba definiendo una ventana modal y en la misma poner un div con el id de la imagen, pero el evento onclick no prosperó, no se si el problema es como llamarla desde la parte del records.innerHTML

1 respuesta 1

0

Teniendo tu modal con este HTML, solo elimina el evento que está dentro de la etiqueta y agrégalo desde javascript:

<div id="infos">
    <i class="fa fa-times closeinfos"></i>
    <div class="container-all" id="contINFO">
        <img src="alguna-imagen-inicial.gif">
    </div>
</div>

Suponiendo que tiene un estilo display:none; y hay que cambiarlo a bloque para "Abrirla". Necesitas una función que reciba el evento (clic en enlace a imagen) como parámetro:

// "e" es el evento que llamó a la función
function abrirInfos(e) {
    // Evitar comportamiento normal del enlace
    e.preventDefault();

    // e.target es el enlace en el que se hizo clic
    // Obtener url para actualizar imagen en modal
    let url = e.target.href;

    // Abrir modal
    document.querySelector('#infos').style = "display:block;";
    // Actualizar imagen en modal, con la URL del enlace
    document.querySelector('contINFO > img').src = url;
}

// Asignar evento para cerrar modal
document.querySelector('#infos .closeinfos').addEventListener('click', () => {
    document.querySelector('#infos').style = "display:none;";
});

Hay cosas a modificar en tus elementos actuales, como usar clase en los contenedores en lugar de asignar estilos directamente en la etiqueta que, además, va a servir para obtener fácilmente los enlaces.

En CSS aplicas las reglas necesarias para los contenedores. Por cierto, no tiene sentido flotar un elemento que tiene ancho del total disponible.

div.imagen {
    width:100%;
}

En Javascript asignas clases en lugar de poner estilos y quitas el evento onclick de los enlaces; se van a asignar después:

let records = document.getElementById('contINFO');
records.innerHTML = '';
for (let i=0; i<features.length; i++){
    if(features[i].get('_code') != null){
        records.innerHTML += '<div id="code" class="codes">' + features[i].get('code') + '</div>'
    }
    if(features[i].get('imagen') !=null){
        records.innerHTML += '<div class="imagen"><a href="' + features[i].get('imagen') + '"><img id= "myIMG" class = "iob" src=' + features[i].get('imagen') + '></a></div>';
    }else{
        records.innerHTML += '<img class = "iobs" src=images/Imagen_dummie.jpg>';
    }
}

Luego, creas una función para capturar clics en los enlaces:

// Obtienes todos los enlaces que estén dentro de un div con clase "imagen"
let images = records.querySelectorAll('.imagen > a');
// Recorres enlaces para asignar evento con la función que mostrará la imagen
images.forEach(image => image.addEventListener('click', abrirInfos);

Nota: No es buena idea actualizar contenedores HTML dentro de un ciclo, lo ideal es crear una variable, generar todo el contenido y, al final, actualizar solo una vez.

1
  • gracias @Triby , en realidad ese html no es un modal, es una ventana html donde muestro los resultados del JSON y donde me viene una imagen a un tamaño determinado 370x280, es ahora después de ver los datos cuando al pinchar sobre esa imagen se me abra una ventana modal mostrándola a tamaño completo. Bueno, esa era la idea.
    – user68481
    Commented el 12 mar. 2021 a las 9:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.