javascriptjqueryhtmlfacebox

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


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.


Solution

  • 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.