Abre Fancybox (o equiv) desde el tipo de entrada del formulario = “enviar”

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

HTML se ve así:

Esto no funcionará:

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

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

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

Para lograr esto, utilicé el complemento jQuery Form ( http://malsup.com/jquery/form/ ) para convertir fácilmente el formulario a una llamada ajax. Luego utilicé la callback 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, adjuntas ajaxForm al formulario mismo.

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

 $("#buttontoclick").click(function() { $('Friendly description').fancybox({ overlayShow: true }).click(); }); 

PRUEBA ESTO

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

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

espero que esto ayude

Fancybox es capaz de lidiar con las solicitudes ajax directamente sin la necesidad de guiones 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; }); 

Basado en

  • La solución original de Garland Pope [less .ajaxForm]
  • Solución de llamada AJAX por Paolo Bergantino [como reemplazo de .ajaxForm]
  • Fancybox carga 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 }); }); 

Puede hacer una presentación ajax de los datos del formulario, almacenar los datos en la sesión y luego activar el enlace.

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

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

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

He estado luchando con esto y he encontrado una forma de mostrar los resultados en el iframe de la caja de fantasía, no soy bueno con ajax, pero necesito una solución de php usando jquery aquí, mi primera respuesta es la siguiente:

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

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

Ahora quiere cambiar el nombre del todo:

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

a cualquier cosa que desee, simplemente lo llamé: "fbframe" y "fbframe" el archivo. Ahora agregue las configuraciones de jquery, y formélas 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  // 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. 

El proceso es:

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

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

Tenga en cuenta que he eliminado esto de mi proyecto actual y que solo he editado ciertas partes necesarias, todavía soy un codificador aficionado y recomendaría el ajax si es posible. ¡y también solo estoy usando FB1! FB2 ya está disponible.

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 a la caja de lujo de una sola vez. Sí envía el formulario estilo ajax. El botón “enviar” debe estar en una etiqueta .

Espero que ayude.