Veamos, estoy desarrollando un sistema simple de subida de imagenes y con jquery lo que hago es crear un visor responsive para cualquier dispositivo, y un sistema que filtra la imagen por x categoria.
Ahora, el problema es que al filtrar la imagen esta se carga con la funcion html() de Jquery y al darle click a la imagen miniatura que muestra no me abre el visor de imagenes....
Si yo recargo la web y pulso en cualquier imagen, se abre el visor y la imagen se carga sin problemas, pero esto no pasa luego de hacer un filtrado (Filtrado con ajax).
Esta seria la funcion simple que captura los datos y abre el visor etc.. ahorrare el code:
Código Javascript:
Ver original
$(document).ready(function(){ $("#galeria #mini_img").on("click", function(){ $("#overlay").fadeIn(600); }); });
Este es el code que carga las imagenes filtradas.
Código Javascript:
Ver original
$(document).ready(function(){ $("#filtrar_imagen").on("click", function(){ var form = $("#filtrar").serialize(); $.ajax({ type: "POST", url: "../funciones/filtrar.php", data: form }).success(function(result){ $("#galeria").html(result); }); }); });
Este es el valor de la variable result:
Código HTML:
<div id='mini_img' img='http://$url_host/images/$linea[nombre]' name='$linea[nombre]' style='background-image:url(http://$url_host/images/$linea[nombre]);'></div>
Espero puedan ayudarme y gracias de antemano!.