Lightboxes and advanced custom fields

Sorry in advance for the long post, but I've read just about everything out there on this topic and no dice. I want to make a custom lightbox and use it to display a person's name, image, and brief bio, with a dark gray overlay. So far I have this:

<?php $args = array('post_type' => 'team'); $the_query = new WP_Query($args); ?>

<div id='imagegallery'>
<?php if ( have_posts() ) :
    while ( $the_query->have_posts() ) :
        $the_query->the_post(); ?>
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">
            <div class="member">
                <div id='member-img'><img src='<?php the_field('image'); ?>' alt='<?php the_field('name'); ?>' /></div>
                <div id='member-name'><?php the_field('name'); ?></div>
            </div>
        </a>

                <!-- Frustrating chunk of evil -->
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
            <div id="light" class="lightbox">
                <?php the_field('name'); ?>
                <img src="<?php the_field('image'); ?>" alt="<?php the_field('name'); ?>" />
                <?php the_field('description'); ?>
            </div>
            <div id="fade" class="overlay"></div>
        </a>
<?php endwhile; endif; ?>
</div>

There are a couple problems with this:

1) The imagegallery div contains all member divs, but it also contains the lightbox, which is not good because everything is squished in one parent div and has scrollbars all over the place. The lightbox should be essentially in the middle of the page, not the imagegallery div. I know this could be easy to fix, but that leads me to the next problem...

2) No matter which member div I click on, the lightbox that appears has all the information from the first member div. I understand this is because of the placement of my frustrating chunk of evil but if I move it outside the loop, then the lightbox that shows up only remembers the info from the last member div, which is essentially the same issue.

Is there any way I can access the field data outside of the WordPress Loop and use it to create a lightbox that shows up when I click on the corresponding member div?