Question

我正在尝试创建一个像这样的选项卡式ACF画廊

大图像应根据单击的缩略图进行切换；

我的代码：

<div class="product-gallery col-md-6">
          <?php $images = get_field('galerija'); 
            if( $images ):
            $images = explode(',', $images);
            $images = array_filter($images);
            if( count($images)): ?>
                <div class="row">
                  <!-- The expanding image container -->
                  <div class="col-8 expanding-image-container">
                   <!-- Expanded image -->
                   <?php foreach( $images as $image ): 
                        $alt = get_the_title($image);
                        $imageUrlFull = wp_get_attachment_image_url(  $image, 'full' ) ?>
                           <?php echo wp_get_attachment_image($image, "large", false, ['alt' => $alt] ); ?>
                    <?php endforeach; ?>
                  </div>
                  <div class="col-3 thumbs-container">
                   <ul>
                    <?php foreach( $images as $image ): 
                        $alt = get_the_title($image);
                        $imageUrlFull = wp_get_attachment_image_url(  $image, 'full' ) ?>
                        <li onclick="Expand(this);">
                           <?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt]); ?>
                        </li>
                    <?php endforeach; ?>
                   </ul>
                  </div>
                </div>
            <?php endif; ?>
          <?php endif; ?>
        </div>

css：

.expanding-image-container img:nth-child(n+2) {
    display:none;
}

我坚持使用JS。我想通过单击document.querySelectorAll('.thumbs-container li').item(n)节目document.querySelectorAll('.expanding-image-container img').item(n)来使用类似的功能，但我完全陷入困境。我将不胜感激！

Answer 1

您可以删除第一个foreach循环，因为您只想将第一个图像显示为扩展/大图像（我想），并像这样修改PHP代码。

 <div class="product-gallery col-md-6">
      <?php $images = get_field('galerija'); 
        if( $images ):
        $images = explode(',', $images);
        $images = array_filter($images);
        if( count($images)): ?>
            <div class="row">
              <!-- The expanding image container -->
              <div class="col-8 expanding-image-container">
               <!-- Expanded image -->
               <?php 
            $image = $images[0];        // considering $images an indexed array
                    $alt = get_the_title($image);
                    $imageUrlFull = wp_get_attachment_image_url(  $image, 'full' ) 
            echo wp_get_attachment_image($image, "large", false, ['alt' => $alt] ); 
        ?>

              </div>
              <div class="col-3 thumbs-container">
               <ul>
                <?php foreach( $images as $image ): 
                    $alt = get_the_title($image);
                    $imageUrlFull = wp_get_attachment_image_url(  $image, 'full' );
            $imgLarge = wp_get_attachment_image($image, "large", false, ['alt' => $alt] ); // to replace the expanding image's url with clicked thumb's image but with a bit larger size
            ?>

                    <li>
                       <?php echo wp_get_attachment_image($image, "thumbnail", false, ['alt' => $alt, 'data-large_img' => $imgLarge]); ?>
                    </li>
                <?php endforeach; ?>
               </ul>
              </div>
            </div>
        <?php endif; ?>
      <?php endif; ?>
    </div>

您可以使用javascript来更改展开图像的src，如下所示。（如果扩展<img>的srcset属性为空）

    let largeImage = document.querySelector( '.expanding-image-container img' ); // expending image
    let thumbs = document.querySelectorAll( '.thumbs-container li img' ); // all the thumb images

    thumbs.forEach( ( thumb, index )=>{
        thumb.addEventListner( 'click', e => { 
            if(  largeImage.getAttribute( 'src' ) != thumb.getAttribute( 'data-large_img' ) ){ // check if the current expanding image src do not match the clicked thumb image
                largeImage.setAttribute( 'src',  thumb.getAttribute( 'data-large_img' ) ); // changes the src of img in the  ".expanding-image-container img" with the clicked thumb 
            }
        } )
    } )

或类似这样的简单jQuery

     jQUery( '.thumbs-container li img' ).click( e => {
        jQuery( '.expanding-image-container img' ).attr( 'src', e.target.getAttribute( 'src' ) );
    })

，但它将同时加载缩略图大小和所有图像的大尺寸。只能加载大尺寸的图片，您可以使用

   <?php echo wp_get_attachment_image($image, 'large', false, ['alt' => $alt]); ?>

在循环中并调整JS之类

    if(  largeImage.getAttribute( 'src' ) != thumb.getAttribute( 'src' ) ){ 
        largeImage.setAttribute( 'src',  thumb.getAttribute( 'src' ) );
    }

JS ACF选项卡式画廊

1 个答案: