Open div inside a custom post-type with Fancybox

Question

I did have a similar problem with this but never managed to find a solution...

I have a custom post-type with a number of pages, but what I want to do is grab a particular div from the pages and display them in a Fancybox when I link to them. Here is the HTML:

about.php - this page has the fancybox links, so I want the links on this page to grab the div from another page called single-team.php:

        <ul id="teamScroller" class="jcarousel jcarousel-skin-tango">
        <?php $teamFeed = new WP_Query(array('post_type' => 'team', 'orderby' => 'name')); ?>
        <?php while ($teamFeed->have_posts() ) : $teamFeed->the_post(); ?>
        <li class="teamItem">
            <?php if (has_post_thumbnail( $post->ID )): ?>
                <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
                <a href="<?php the_permalink() ?>" rel="bookmark" class="teamThumb" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo $image[0]; ?>&w=71&h=71&zc=1" alt="<?php the_title(); ?>" /></a>
            <?php endif; ?>
            <a href="<?php the_permalink() ?>"><h2 class="redSubHeader teamThumb"><?php echo substr($post->post_title,0,50); // short title ?>...</h2></a>
        </li>
        <?php endwhile;?>
    </ul>

single-team.php - This is the content I want to display in the Fancybox div on about.php. single-team.php has other elements within it, but I've just pasted the code I was to grab here...

<section>
    <div id="productMainPanel">
        <h1 class="bottomBorder"><?php the_title(); ?></h1>
        <?php if (has_post_thumbnail( $post->ID )): ?>
            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo $image[0]; ?>&w=640&h=157&zc=1" alt="<?php the_title(); ?>" /></a>
        <?php endif; ?>
        <?php while (have_posts()): the_post(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>
    </div>
</section>

And of course, the jquery:

$(document).ready(function() {
    $('a.teamThumb').live('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href');
        url = url + ' #productMainPanel';
        $('#productMainPanel').load(url, function(data, stat, req){
            $(this).fancybox();
        });
    })


});

Does anyone know how I can get this to work? Because so far, it's either just linked straight to the page or it's opened up the Fancybox but displayed the entire single-team.php page.

Thanks

Answer 1

Remove the get_header(), get_footer(), and get_sidebar() references from single-team.php.