0

tengo una vista que me trae imagenes con sus datos dinamicamente desde mi base de datos, lo que yo quiero hacer es que al clickear en la imagen, me muestre otra ventana con esa misma imagen y sus datos principales que vienen con ella.

El problema es que no tengo idea de como hacerlo, me imagine poniendole un evento OnClick en donde llamo a la img, pero me trae dudas, porque no se como podria agarrar todos los datos de esa misma imagen y mostrarlos, no se si me explico bien...

Paso mi codigo js donde tengo un ajax, que trae la imagen y sus datos y los muestro en html haciendo un append al div... Donde iria el evento OnClick? Como puedo que al clickear la imagen, me muestre esa misma y sus mismos datos pero en otra ventana?

Gracias..

/*********DEVUELVE INTERNO + FAB + ART + DESCR + COLOR + RUTA DE IMAGEN ***********/
function ObtengoDatosYRutaFoto(NombreSeccion, NombreCategoria, NombreEstilo, NombreMarca, NumTalle) {
    NombreSeccion = $.trim(NombreSeccion);
    NombreCategoria = $.trim(NombreCategoria);
    NombreEstilo = $.trim(NombreEstilo);
    NombreMarca = $.trim(NombreMarca);
    NumTalle = $.trim(NumTalle);

    var dir = "ObtengoDatosConFoto";
    $.ajax({
        type: 'get',
        url: api + dir + "?NombreSeccion=" + NombreSeccion + "&NombreCategoria=" + NombreCategoria + "&NombreEstilo=" + NombreEstilo + "&NombreMarca=" + NombreMarca + "&NumTalle=" + NumTalle,
        success: function(datos) {
            var d = datos;
            for (var i = 0; i < d.length; i++) {
                var img = d[i].Ruta;
                $("#contenedor_busqueda").append('<div class="divConImg"><h4 class="infoImg">' + d[i].Fabricante + " / " + d[i].Articulo + " /<br>" + d[i].Descripcion + " / " + d[i].Color + '</h4><img src=' + img + ' border="1" width="200px" height="200px"></div>');
                //ACA MUESTRO LA IMAGEN, ACA IRIA EL EVENTO ONClick? Lo puedo llamar sin problemas despues?
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(xhr);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
}

1 respuesta 1

1

Creo/espero que este ajuste te sirva:

function ObtengoDatosYRutaFoto(NombreSeccion, NombreCategoria, NombreEstilo, NombreMarca, NumTalle) {
NombreSeccion = $.trim(NombreSeccion);
NombreCategoria = $.trim(NombreCategoria);
NombreEstilo = $.trim(NombreEstilo);
NombreMarca = $.trim(NombreMarca);
NumTalle = $.trim(NumTalle);

var dir = "ObtengoDatosConFoto";
$.ajax({
    type: 'get',
    url: api + dir + "?NombreSeccion=" + NombreSeccion + "&NombreCategoria=" + NombreCategoria + "&NombreEstilo=" + NombreEstilo + "&NombreMarca=" + NombreMarca + "&NumTalle=" + NumTalle,
    success: function(datos) {
        var d = datos;
        for (var i = 0; i < d.length; i++) {
            var img = d[i].Ruta;
            var div = $('div').on('click',function(e){
                e.preventDefault();                 
                //Pon aqui la lógica que necesites. Puedes acceder desde aqui a la variable img por ejemplo;
            })
            .addClass('divConImg')
            .append('<h4 class="infoImg">' + d[i].Fabricante + " / " + d[i].Articulo + " /<br>" + d[i].Descripcion + " / " + d[i].Color + '</h4><img src=' + img + ' border="1" width="200px" height="200px">');
            $("#contenedor_busqueda").append(div);                
        }
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log(xhr);
        console.log(textStatus);
        console.log(errorThrown);
    }
});

}

Básicamente lo que ajusté es que creo primero el div, le agrego el handler para el evento click, le agrego el contenido y luego si le hago append al contenedor.

De esta forma puedes meter el evento. No se si esa era tu pregunta.

3
  • 1
    gracias por tu respuesta, lo pude hacer de otra forma, agregandole un href antes del img pero dentro de <a>
    – tato8vio
    el 7 ago. 2019 a las 17:28
  • ahi me lleva a otra ventana, lo que me queda seria llevar los datos de esa img que le doy click\
    – tato8vio
    el 7 ago. 2019 a las 17:29
  • Bueno, puedes interceptar el click del "a" (Poniendo preventDefault) y abrir la ventana pasando los datos (puede ser con atributos data-*). el 7 ago. 2019 a las 18:16

Tu Respuesta

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

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