Target specific ID from another page with fancybox

I’ve been trying to get this to work for quit sometime now. And asked this question around the internet and searched google for this. Yet I still have to find the right answer.

Update: (read on for full story).
I have found some script. But now the fancybox animation just appears and nothing else.

$(function(){
        $('.fancybox-incl').each(function(i, el) {
            var target;
            $(el).click(function(){
                target = this.hash.replace('#','.');
            }).fancybox({ 
                'autoDimensions': true, 
                'type': 'ajax',
                'ajax': { 
                    dataFilter: function(data) {
                        return target ? $(data).filter(target)
                        ('.discription') : $(data); 
                    } 
                } 
            }); 
        });
    });

It looks like the original poster had the same issue but fixed it. But he didn’t comment his own question with the correct answer.

Original question: open requested div in fancybox from other page

If someone could help me with this one… The problem:
I’m trying to retrieve a specific ID from an other page (in the same domain) with fancybox.

The fancybox link is on my frontpage and opens a page. But I don’t want the whole page to show, only a specific DIV ID from that page.

This is how I load the page using fancybox: (in my functions.php)

function get_the_term_list_inclusief( $id, $taxonomy, $before = '', $sep = '', $after = '') {
    $args_incl = array('order' => 'ASC');

    $terms = wp_get_object_terms( $id, $taxonomy, $args_incl );

    if ( is_wp_error( $terms ) )
        return $terms;


    if ( empty( $terms ) )
        return false;

    $links = array();

    usort($terms, function($a, $b) {
        return strcmp($a->name, $b->name);
    });

    foreach ( $terms as $term ) {
        $link = get_term_link( $term, $taxonomy, $args_incl );
        if ( is_wp_error( $link ) ) {
            return $link;
        }

        $links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>';
    }

My single-[page-slug].php file looks like this:

<?php get_header(); ?>
<?php the_post(); ?>



<section id="inclusief" style="margin-top:15px;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
    </div>
</section>

<section id="inclusief1" style="margin-top:15px;display:none;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>

Now when I click on a fancybox link I would like to show ONLY #inclusief1.

Fancybox script:

$(document).ready(function() {
                $(".fancybox-incl").fancybox({
                    maxWidth   : 900,
                    maxHeight  : 300,
                    fitToView  : false,
                    width      : '100%  ',
                    height     : '100%',
                    autoSize   : false,
                    closeClick : false,
                    openEffect : 'fade',
                    closeEffect: 'fade',
                    helpers: { 
                        title: null
                    }
                });
            });

I have gotten it to work, with this article Jquery FancyBox target specific DIV ID?

But that only works when the Div is on the same page… and not on a other page.

Help would be much appreciated. I’m not that of a coder so, but no novice either. So if some one could explain what I’m suppose to do. thanks!

As suggested by Pete (thanks). This looks promising. But I cant seem to figure it out with my Div names. Can anyone help me?

$('#button').on('click', function(){    
   var nzData = '/url.com?Zip=8000 #module';

     $('#foo').load(nzData, function(){
       var foo = $('#foo').html(); 
       $.fancybox(foo);
    });

});