Dynamic Content In Fancybox Not Working

Question

I have a listing of staff member that I want to have a link that pops up a bio via fancybox. I have no problem getting this to work using static id's, but when I try to do it dynamically via a custom field it doesn't seem to work.

Here is what I am doing:

<a class="staffLink" href="#" title="View {staff:staffName}'s bio">bio</a>

<script type="text/javascript">
                                        $(document).ready(function() {
                                            $(".staffLink").fancybox({
                                                href        : '#{staff:staffName} Bio',
                                                maxWidth    : 800,
                                                maxHeight   : 600,
                                                fitToView   : false,
                                                width       : '70%',
                                                height      : '70%',
                                                autoSize    : false,
                                                closeClick  : false,
                                                openEffect  : 'none',
                                                closeEffect : 'none',
                                                helpers     : {
                                                    media : {},
                                                    title : null,
                                                    overlay: {
                                                        opacity: 0.9
                                                    } // overlay 
                                                }
                                            });
                                        });
                                    </script>

<div style="display:none;" id="{staff:staffName} Bio">{staff:staffName} test content</div>

If I take out the custom field (staff:staffName) and just leave "Bio" for the id of the popup and in the the href of the Fancybox parameters it works. Also, If I look at the outputted code it populates correctly. The staff name is filled in for the href and the id.

Any ideas?

Answer 1

You've got a few problems, all related to JavaScript, not EE though. You'd be better off asking on the general Stack Exchange if this doesn't answer it.

Your JavaScript code is being generated per loop of the bios, so you have 11 copies of the JS you've posted above and only the last one will ever run as they're all triggered from the same class trigger (.staffLink).

Next issue is your html is invalid - the ID you're trying to use the content for is invalid and has spacing in href: '#Steve Eller Bio'.

I'd suggest you ditch referencing it in that way and include only 1 occurance of the JS after all the bios have been output, then target the content relatively:

{START EE BIO LOOP}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 staffItem item active">
    <a class="staffLink" href="#" title="View {staff:staffName}'s bio">bio</a>
    ...
    <div style="display:none;" class="staffBio">{staff:staffName} test content</div>
</div>
{/END EE BIO LOOP}

Note that the Bio content for the popup is inside the staffItem div. Now the JS (note I've changed the href parameter to content):

<script type="text/javascript">
    $(document).ready(function() {
        $(".staffLink").fancybox({
            content     : $(this).parent().siblings('.staffBio').html(),
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            helpers     : {
                media : {},
                title : null,
                overlay: {
                    opacity: 0.9
                } // overlay 
            }
        });
    });
</script>