How to load another div while facebox pop up is still open?

Question

Hi. I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:

<script type="text/javascript">
        jQuery(document).ready(function($) {
            $('a[rel*=facebox]').facebox({})
        })
</script>

<a href="#div1" rel="facebox">Div1</a>
<div id="div1" style="display:none;">
   <a href="#div2" rel="facebox">Load the other div</a>
</div>
<div id="div2" style="display:none;">
   <p>Other div</p>
</div>

I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.

Answer 1

From skimming through the source, I think you can just pass a string, like this:

$.facebox('<div>test</div>');

Answer 2

I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:

<script type="text/javascript">
    function find_hidden(){
        $('.infinite')
        .unbind('click')
        .bind('click', function() {
            var glink = $(this).attr('href');
            jQuery.facebox({div: glink});
            find_hidden();
        });
    }
</script>

I found the answer here.

Answer 3

jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });