JS Галерея с вкладками ACF - PullRequest
Новая
       65

JS Галерея с вкладками ACF

0 голосов
/ 12 апреля 2020

Я пытаюсь создать галерею ACF с вкладками, которая выглядит следующим образом:

enter image description here

большое изображение должно переключаться в зависимости от того, какой эскиз нажимается;

мой код: 

<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) show document.querySelectorAll('.expanding-image-container img').item(n), но я полностью застрял. Буду очень признателен за любую помощь!

1 Ответ

0 голосов
/ 12 апреля 2020

вы можете удалить первый foreach l oop, потому что вы хотите показать только первое изображение как расширенное / большое изображение (я полагаю) и немного изменить свой код 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, чтобы изменить sr c расширения изображения примерно так. (если раскрывающийся атрибут <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]); ?>

в l oop и настроить JS как 

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