LAMP On Focus

Icon

PHP, MySQL, Linux practical usage.

Facebox Extended.

I was looking for a lightbox like control which is easy to customize.
Landed on a excellent control “facebox“. As we needed some additional functionality in addition to the ones available I have made some enhancements to it.

Create Modal Window

Clicking on the overlay layer or the Esc key will not close the window, forcing the user to respond to the popup window.

jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({modal:true})
});

Switch off footer

Does not display the footer div on the popup.

jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({footer:''})
});

Replace the content of the window.

This addition allows you to replace the content of the loaded Facebox window with a new content. Quite handy if you want to display response of a form submit from within the modal window.

$.facebox.content(<new_content>);

//Example.,

$.get('http://www.domainname.com/form/submit/url.php', 'params', function(data){$.facebox.content(data)})

Hope these changes will be helpfull for some one.
Download the modified version : Facebox Extended

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • Reddit
  • RSS
  • Slashdot
  • Yahoo! Bookmarks
  • Blogosphere News
  • Ping.fm
  • StumbleUpon
  • DZone
  • Identi.ca
  • LinkedIn
  • MySpace
  • Netvibes
  • Suggest to Techmeme via Twitter
  • Technorati
  • Twitter

Category: jQuery

Tagged: , , ,

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

6 Responses

  1. Edison Wong says:

    I Need Help here. How can I make submit a form from my Facebox window? Everytime I click the button, the response will not be shown on facebox anymore. Can't get it to work using jquery.form for cross browser as well. Need a clearer picture of how this can be done.

    • Raja says:

      Sorry for the late reply :) .

      submit the form thru AJAX call, and use $.facebox.content(<AJAX_RESPONSE>); to update the facebox window, Also after the onSubmit call do a 'return false' to block the default form submit from taking place

  2. Hey there… for some reason fb extended is ignoring my options… I tried something like
    <code>
    $.facebox({
    modal: true,
    opacity: 60,
    overlay: false
    });
    </code>

    Also… how do I programmatically provide the contents alongwith this bit of code?

    I tried…
    <code>
    $.facebox({
    modal: true,
    opacity: 60,
    overlay: false,
    content: 'Please wait…'
    });
    </code>

    and…

    <code>
    $.facebox({
    modal: true,
    opacity: 60,
    overlay: false,

    }).content( 'Please wait…' );
    </code>

    Didn't work out for me….! Any help much appreciated.

    Thanks,
    m^e

  3. Chris says:

    Help needed.
    I get it to show the results box.
    However I can't use my keyboard in the box nor can I click the results to make em pop in the input box.
    any ideas?

  4. guest says:

    I'm using it, thank you!

  5. icerelic@twitter says:

    What I've been looking for.
    Quite helpful!

Leave a Reply

Calendar

February 2009
M T W T F S S
« Jan   Jun »
 1
2345678
9101112131415
16171819202122
232425262728  

Bookmarks

  • No bookmarks avaliable.

Friend Connect