Uso de la funcion Live

[valenti77]

Tengo una ventana modal, que carga contenido HTML con la func. ".load()". Hasta ahí todo perfecto...

La cuestión es que dentro de este HTML, hay una galeria de imágenes, y las miniaturas que son links, al hacer .click() tienen que cargar la imagen en grande en un contenedor superior, pero esto obviamente no funciona.

Tendría que usar la función .live() no? ya que el HTML si lo saco del modal, y no lo llamo con AJAX, es decir, link comun, anda bien. El problema es que nose cuando debo poner la funcion live, si en el HTML que contiene el modal, en el modal, o donde sea.

Espero sus respuestas, muchas gracias!

[InKarC]

.load() es Ajax. Lo que tiene que hacer es asignar los eventos en el Callback

Código Javascript:

.load("pag.html",function(){
    //Asignar eventos (agrandar imagenes, lo que sea)
})
 

[masterpuppet]

Para esto es que existe justamente live, con poner el código dentro del ready debería suficiente, lo has probado y no te funciona ?, en caso afirmativo postea el codigo js y html.

Saludos.

[valenti77]

Gracias muchachos, me anduvo la funcion live, tambien tenia un problema con las ID que tambien lo solucioné.

Lo que me está pasando ahora es que al abrir el Modal Popup por primera vez todo perfecto.

Ahora cuando cierro, y abro otro item, el popup no aparece. Cambie el css de

Código CSS:

position:fixed;
 

a

Código CSS:

position:absolute
 

para ver que pasaba, y se muestra abajo de toda la pagina. Si vuelvo a

Código CSS:

position:fixed;
 

no se ve y no se permite el Scroll.

Para mi es un tema de las variables de posición que toma el javascript:

Código Javascript:

$(document).ready(function(){
        //parametros principales
        
        var contenidoHTML = '<p>Tu contenido HTML aqui</p><button onclick=\"closeModal()\">Cerrar</button>';
        
        var ancho = 600; 
        var alto = 250;
 
        $('#button').click(function(){
                // fondo transparente
                // creamos un div nuevo, con dos atributos
                var bgdiv = $('<div>').attr({
                                        className: 'bgtransparent',
                                        id: 'bgtransparent'
                                        });
                
                // agregamos nuevo div a la pagina
                $('body').append(bgdiv);
                
                // obtenemos ancho y alto de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();
                
                //establecemos las dimensiones del fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
                
                
                // ventana modal
                // creamos otro div para la ventana modal y dos atributos
                var moddiv = $('<div>').attr({
                                        className: 'bgmodal',
                                        id: 'bgmodal'
                                        });     
                
                // agregamos div a la pagina
                $('body').append(moddiv);
 
                // agregamos contenido HTML a la ventana modal
                $('#bgmodal').append(contenidoHTML);
                
                // redimensionamos para que se ajuste al centro y mas
                $(window).resize();
        });
 
        $(window).resize(function(){
                // dimensiones de la ventana del explorer 
                var wscr = $(window).width();
                var hscr = $(window).height();
 
                // estableciendo dimensiones de fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
                
                // estableciendo tamaño de la ventana modal
                $('#bgmodal').css("width", ancho+'px');
                $('#bgmodal').css("height", alto+'px');
                
                // obtiendo tamaño de la ventana modal
                var wcnt = $('#bgmodal').width();
                var hcnt = $('#bgmodal').height();
                
                // obtener posicion central
                var mleft = ( wscr - wcnt ) / 2;
                var mtop = ( hscr - hcnt ) / 2;
                
                // estableciendo ventana modal en el centro
                $('#bgmodal').css("left", mleft+'px');
                $('#bgmodal').css("top", mtop+'px');
        });
        
 });
        
function closeModal(){
        // removemos divs creados
        $('#bgmodal').remove();
        $('#bgtransparent').remove();
}
 

Esto pasa solo en mozilla y en Chrome. En IE todo bien hasta que a un punto se deja de ver lo que hay bajo el modal.

PD: EL lunes edito bien la función ya que no tengo acceso ahora, y como no recuerdo muy bien cuales fueron los cambios que le hice, prefiero tenerlos enfrente a arriesgarme a escribir la función en este momento, disculpen.