ACF data not showing in Fancybox

• ollyog

• August 1, 2014 at 9:14 am

I’m using the Advanced Custom Fields plugin to output an screenshot with a link (also using ACP to add a field that has the embed code for a custom videos) into posts on an archive page. The output code for the custom field is placed in a div which is hidden and then loads up in fancybox when the .watchsession link is clicked. The problem is, the ACF content doesn’t load in the fancybox when called. The popup will appear with title but no content. If I place the code outside of the hidden div it shows. Not sure where I’ve gone wrong. Code below!

Cheers,

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>    

<a id="fancybox-button" href="#fancybox-content" class="watchsession" title="<?php the_title(); ?>">Watch</a>
<div style="display: none;">
   <div id="fancybox-content" style="width:600px; height:400px;overflow: hidden;">
   <img src="<?php the_field('upload_screenshot'); ?>"/>
   </div>
</div>
</article>

<script type="text/javascript">
                    ( function($) {
$(document).ready(function() {
    $("#fancybox-button").fancybox({
helpers : {
        title : {
            type: 'inside',
            position : 'top'
        }
    },
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
    });
});
    } ) ( jQuery );
</script>