Open Fancybox (or equiv) from Form input type=“sub

Question

is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?

HTML looks like this:

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

These won't do:

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

Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance

Answer 1

A better idea is to use on-the-fly html, ie.

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

Answer 2

This solution may serve your purpose:

• no ajax calls
• use fancybox's iframe type option
• pass url [+ data, via jquery's serialize method] in fancybox's href option
• loading animation is automatic

--

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

Answer 3

TRY THIS

$(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>

on click of the button you trigger a click on the href which is hidden.

hope this helps