Как создать ссылку на всплывающую галерею «Дополнительные настраиваемые поля»? - PullRequest
Новая
       31

Как создать ссылку на всплывающую галерею «Дополнительные настраиваемые поля»?

0 голосов
/ 15 ноября 2018

Я пытаюсь создать галерею расширенных пользовательских полей в лайтбоксе, который появляется при нажатии значка.Я дошел до того, что лайтбокс находит все изображения, связанные с постом, и правильно отображает их, когда вы щелкаете по значку, но проблема, с которой я сталкиваюсь, это также отображение нескольких значков для галереи.

Образец изображения

Я предполагаю, что это потому, что у меня есть значок галереи как часть цикла foreach, но я не знаю, как его разделить.У меня была идея назначить уникальные CSS-классы дополнительным значкам, а затем скрыть их, но я надеялся на что-то более элегантное.Может ли кто-нибудь указать мне правильное направление?Код, который я собрал, приведен ниже. 

 <?php 
 $images = get_field('gallery_photos');
 if($images): ?>
    <div class="gallery">   
    <?php foreach( $images as $image ): ?>
        <a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
        <img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
        </a>
    <?php endforeach; ?>
    </div>
 <?php endif; ?>

1 Ответ

0 голосов
/ 16 ноября 2018

Измените ваш цикл, как показано ниже, тег img будет запускаться только тогда, когда $i=0, означает только первый раз. 

<?php 
  $images = get_field('gallery_photos');
    if($images): ?>
      <div class="gallery">   
        <?php $i=0; foreach( $images as $image ) : ?>
          <a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
            <?php if( $i==0 ) : ?>
              <img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
            <?php endif; ?>
          </a>
        <?php $i++; endforeach; ?>
      </div>
    <?php endif; ?>
...