如何正确使用高级自定义字段和 Fancybox答案

【问题标题】：How to use Advanced Custom Fields and Fancybox correctly如何正确使用高级自定义字段和 Fancybox
【发布时间】：2015-01-29 02:03:46
【问题描述】：

我有一个带有 ACF 中继器字段的 Wordpress 模板，显示滑雪俱乐部的教练。成员name, title, email, picture and bio有子字段。

除bio field 外，一切正常，我正在尝试使用easy-fancybox plugin 打开带有fancybox 的简历，但它只会在点击任一生物链接时打开提交的第一个简历。 我需要它来打开在指导特定子领域提交的简历。我假设我的php code 与fancybox 或‘hidden’ div 相关的某个地方存在问题。如果我不使用fancybox 并简单地回显$bio，它会显示正确的bio，但它会在页面上显示整个bio。

Here is the page:

这是模板代码：

<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>

        <a href="mailto:<?php the_sub_field('member_email'); ?>"><?php echo $email; ?></a>
        <?php endif; ?>

      <li><?php if( $bio ): ?></li>
        <a class="fancybox-inline" href="#bio">BIO</a> <?php endif; ?>
    </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-->

【问题讨论】：

标签： wordpress fancybox advanced-custom-fields

【解决方案1】：

尝试在锚点 href="#bio1" 上分配不同的 id 编号，并将相同的 id 分配给 div。以下是我正在粘贴的示例代码。

  

<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 $i=1; 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>

        <a href="mailto:<?php the_sub_field('member_email'); ?>"><?php echo $email; ?></a>
        <?php endif; ?>

      <li><?php if( $bio ): ?></li>
        <a class="fancybox-inline" href="#bio<?php echo $i;?>">BIO</a> <?php endif; ?>
    </ul>

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

【讨论】：