jquery - close - fancybox pdf

Abra Fancybox(o equiv) desde el tipo de entrada de formulario="enviar"

Question

¿Hay alguna forma de obtener un fancybox ( http://fancy.klade.lv/ ) o cualquier otro lightbox al enviar un FORM (con un botón de imagen)?

HTML se ve así:

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

Estos no van a hacer:

    $("form").fancybox();
    $("input").fancybox();
    $("input[name=''weiter'']").fancybox();

¿Alguien ha visto mi error o tiene una solución alternativa o un script alternativo? Gracias por adelantado

Answer 1

Acabo de estar luchando con esto y he encontrado una manera de mostrar los resultados en el iframe de fancy box, no soy bueno con ajax, pero necesito una solución php que use jquery, aquí va mi primera respuesta:

Habrá que hacer un pequeño ajuste en el archivo jquery.fancybox js, estaba usando jquery.fancybox.1.3.4.pack.js . abre esto con cualquier editor, etc., y busca: name="fancybox-frame : eso es, solo debería haber una instancia de esto y se verá así:

 name="fancybox-frame''+(new Date).getTime()+''"

Ahora quieres renombrar el conjunto:

fancybox-frame''+(new Date).getTime()+''` 

a cualquier cosa que quieras, simplemente lo llamé: "fbframe" y "fbframe" el archivo. Ahora agregue la configuración de jquery, y forme de la siguiente manera y debería funcionar bien:

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                ''width''             : ''75%'',
                ''height''            : ''100%'',
                ''autoScale''         : false,
                ''type''              : ''iframe'',
                ''onComplete'':function (){$(''#formid'').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger(''click'');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href=''#''></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name=''iduser'' id=''iduser'' action=''page.php'' target=''fbframe'' method=''post''>
 <input />
 <input />
 <input id=''setID'' type=''hidden'' name=''userid'' value='''' />
 <input type="button" onClick=''testfb(123)'' />
 </form>

El proceso es:

haga clic en enviar -> función de llamada -> función haga clic en el enlace FB -> onComplete

onComplete Envía el formulario al iframe después de que FB lo haya cargado. hecho.

Tenga en cuenta que he sacado esto de mi proyecto actual y que acabo de editar algunas partes requeridas, todavía soy un programador aficionado y le recomendaría el ajax si puede. y también estoy usando sólo FB1! FB2 ya está disponible.

Answer 2

Basado desde

• La solución original de Garland Pope [menos .ajaxForm]
• Solución de llamada AJAX de Paolo Bergantino [como reemplazo de .ajaxForm]
• Fancybox cargando el controlador de animación por mí mismo [para que el usuario sepa que el contenido se está cargando]

-

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr(''method''), // GET or POST
            url: $(this).attr(''action''), // the file to call
            success: function(response) { // on success..
                $.fancybox({ ''content'' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});

Answer 3

Creo que todas las otras respuestas pierden el punto de la pregunta (a menos que yo sea el único malentendido). Lo que creo que el autor quería era tenerlo de tal manera que cuando se envía un formulario, sus resultados se muestran en un fancybox. No encontré que ninguna de las otras respuestas proporcionara esa funcionalidad.

Para lograr esto, utilicé el complemento de formulario jQuery ( http://malsup.com/jquery/form/ ) para convertir fácilmente el formulario en una llamada ajax. Luego usé la devolución de llamada exitosa para cargar la respuesta en un fancybox usando una llamada manual a $ .fancybox ().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                ''content'' : responseText
            });
        }
    }); 
});

Entonces, en lugar de adjuntar fancybox a alguna etiqueta artificial <a>, adjunte ajaxForm al formulario en sí.

Answer 4

Esta solución puede servir a su propósito:

• no llamadas ajax
• utilizar la opción de tipo iframe de fancybox
• pasar url [+ datos, a través del método de serialización de jquery] en la opción href de fancybox
• la animación de carga es automática

-

$(document).ready(function(){
        $(''#yourform'').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                ''type'': ''iframe''
            });
            return false;
        });
});

Answer 5

Fancybox puede gestionar las solicitudes de ajax directamente sin la necesidad de scripts jQuery adicionales.

$("#login_form").bind("submit", function() {

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>

Answer 6

PRUEBA ESTO

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger(''click'');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

Al hacer clic en el botón, se activa un clic en el href que está oculto.

espero que esto ayude

Answer 7

Puede hacer un envío ajax de los datos del formulario, almacenar los datos en la sesión y luego activar el enlace haciendo clic.

Answer 8

Solo tenía que hacer esto. Así es como lo hice.

$(''#elementid'').fancybox({
   onStart : function() {
      $.post($(this).attr(''href''), $(''#formid'').serialize());
   }
});

De esa manera, puede enviar el formulario y llamar al fancybox todo de una vez. Se envía el formulario ajax estilo. El botón "enviar" debe estar en una etiqueta <a>.

Espero que ayude.

Answer 9

Una mejor idea es usar html sobre la marcha, es decir.

$("#buttontoclick").click(function() {
    $(''<a href="path/to/whatever">Friendly description</a>'').fancybox({
        overlayShow: true
    }).click();
});