Question

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

除了bio field之外，一切正常，我正在尝试使用fancybox使用easy-fancybox plugin打开生物，但是它只会打开生物链接时提交的第一个生物点击。 我需要它来打开在该教练特定子字段中提交的生物。我假设我的php code与fancybox或‘hidden’ div有关，我遇到了问题。如果我不使用fancybox＆amp;只需回显$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-->

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

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

1 个答案: