使用jQuery修改模态框缩略图：WordPress作品集循环技术问询

Hey there! Let's walk through how to add smooth thumbnail switching to your portfolio modals built with WordPress loops and ACF. Here's a complete, actionable solution tailored to your setup:

Step 1: Update Your WordPress Loop to Include Modal Thumbnail Structure #

First, let's flesh out your existing loop to render both the main modal image and a thumbnail grid for each portfolio item. We'll use ACF's gallery field and unique IDs to target each modal individually:

<div class="col-lg-8 col-md-12">
  <div class="row">
    <?php 
    $args = array( 
      'post_type' => 'portfoolio', 
      'posts_per_page' => 9 
    ); 
    $the_query = new WP_Query( $args ); 
    ?>

    <?php if ( $the_query->have_posts() ) : ?>
      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <?php 
        $postid = get_the_ID(); 
        $images = get_field('galerii', $postid);
        // Make sure we have images before rendering
        if( $images ): 
        ?>
          <!-- Portfolio Item Trigger -->
          <div class="col-lg-4 col-md-6 mb-4 portfolio-item">
            <a href="#" class="portfolio-link" data-toggle="modal" data-target="#portfolio-modal-<?php echo $postid; ?>">
              <?php the_post_thumbnail('medium', array('class' => 'img-fluid')); ?>
            </a>

            <!-- Portfolio Modal -->
            <div class="modal fade" id="portfolio-modal-<?php echo $postid; ?>" tabindex="-1" role="dialog" aria-labelledby="portfolio-modal-label-<?php echo $postid; ?>" aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="portfolio-modal-label-<?php echo $postid; ?>"><?php the_title(); ?></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <!-- Main Modal Image -->
                    <img 
                      id="modal-main-img-<?php echo $postid; ?>" 
                      src="<?php echo esc_url($images[0]['url']); ?>" 
                      alt="<?php echo esc_attr($images[0]['alt']); ?>" 
                      class="img-fluid mb-3"
                    >

                    <!-- Thumbnail Grid -->
                    <div class="d-flex flex-wrap justify-content-center modal-thumbnails">
                      <?php foreach( $images as $index => $image ): ?>
                        <img 
                          src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" 
                          alt="<?php echo esc_attr($image['alt']); ?>" 
                          class="modal-thumbnail m-2 <?php echo $index === 0 ? 'active' : ''; ?>"
                          data-target-img="modal-main-img-<?php echo $postid; ?>"
                          data-img-url="<?php echo esc_url($image['url']); ?>"
                          style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;"
                        >
                      <?php endforeach; ?>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <?php endif; ?>
      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?> <!-- Reset query to avoid conflicts -->
    <?php endif; ?>
  </div>
</div>

Step 2: Add jQuery for Thumbnail Switching #

Next, add this jQuery code to your theme's footer.php (before the closing </body> tag) or a custom JS file enqueued in WordPress:

jQuery(document).ready(function($) {
  // Handle thumbnail clicks
  $('.modal-thumbnail').on('click', function() {
    // Get target image ID and new URL from data attributes
    const targetImgId = $(this).data('target-img');
    const newImgUrl = $(this).data('img-url');

    // Update the main modal image
    $('#' + targetImgId).attr('src', newImgUrl);

    // Update active thumbnail state
    $(this).addClass('active').siblings().removeClass('active');
  });

  // Reset modal state when it opens (optional but recommended)
  $('.modal').on('show.bs.modal', function() {
    const $modal = $(this);
    // Set first thumbnail as active and reset main image
    const $firstThumbnail = $modal.find('.modal-thumbnail:first');
    const targetImgId = $firstThumbnail.data('target-img');
    
    $('#' + targetImgId).attr('src', $firstThumbnail.data('img-url'));
    $firstThumbnail.addClass('active').siblings().removeClass('active');
  });
});

Step 3: Add CSS for Active Thumbnail Styling #

Add this CSS to your theme's stylesheet or customizer to make the active thumbnail stand out:

.modal-thumbnail {
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  border: 2px solid transparent;
}

.modal-thumbnail.active {
  opacity: 1;
  border-color: #007bff; /* Adjust this color to match your theme */
}

Key Notes: #

• Unique IDs: We use the post ID to generate unique IDs for each modal and its main image, so there's no conflict between multiple portfolio items.
• Data Attributes: The data-target-img and data-img-url attributes make it easy for jQuery to fetch the necessary information without hardcoding selectors.
• Query Reset: Always call wp_reset_postdata() after custom queries to restore the global post object.
• Accessibility: We added proper aria attributes and a modal title to keep your portfolio accessible.

内容的提问来源于stack exchange，提问作者user8116000