PHP issues with repeater and fancybox

• stormasse

• December 1, 2014 at 3:49 pm

I have a template with a repeater field showing coaches in a ski club. There are sub-fields for member name, title, email, picture and bio.

Everything works fine except the bio field, I am trying to open the bio with fancybox using the easy-fancybox plugin but it will only open the first bio submitted when either bio link is clicked on. I need it to open the bio that is submitted in that coaches specific sub-field. I am assuming that I have an issue somewhere with my php code relating to fancybox or the ‘hidden’ div. If I do not use fancybox & simply echo $bio it shows the correct bio but it then shows the whole bio on the page.

Here is the page: http://tssc.org/team-gravity-coaches/

Here is the template code:

<section class="content">
  <?php get_template_part('inc/page-title'); ?>

  <div class="pad group">
    <?php while ( have_posts() ) : the_post(); ?>

    <div class="member_info">
      <?php if( have_rows('member_info') ): ?>
      <?php while( have_rows('member_info') ): the_row(); 
                          // vars
                          $name = get_sub_field('member_name');
                          $title = get_sub_field('member_title');
                          $email = get_sub_field('member_email');
                          $image = get_sub_field('member_picture');
                          $bio = get_sub_field('member_bio');
                      ?>

      <div class="member_content">
        <div class="member_pic">
	  <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
	</div>

        <ul>
          <li><?php echo $name; ?></li>

          <li><?php echo $title; ?></li>

          <li><?php if( $email ): ?></li>

          <li style="list-style: none; display: inline">
            <a href="mailto:<?php the_sub_field('member_email'); ?>"><?php echo $email; ?></a>
            <?php endif; ?>
          </li>

          <li><?php if( $bio ): ?></li>

          <li style="list-style: none; display: inline">
            <a class="fancybox-inline" href="#bio">BIO</a> <?php endif; ?>
          </li>
        </ul>

        <div style="display: none;">
          <div id="bio">
            <p><?php echo the_sub_field('member_bio'); ?></p>
          </div>
        </div>
      </div>
     <?php endwhile; ?>
     <?php endif; ?><
     ?php endwhile; // end of the loop. ?>
    </div><!--/.pad-->
  </div>
</section><!--/.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>