Как изменить миниатюру галереи WordPress на раздвижные?

На моем сайте пользователь может загружать фотографии на страницу, но миниатюры продолжают снижаться, если у них много фотографий.Как изменить миниатюру галереи WordPress на раздвижные?

Компоновка миниатюр, продолжает идти вниз и едят много пространств:

The layout of thumbnails that keeps going down and eat lot of spaces

Есть ли способ, чтобы изменить эскизы в скользящем?

Вот коду

<?php if (apply_filters('horizon_submission_listing_metabox_allowed', true, 'gallery', get_the_author_meta('ID'))): ?> 
    <?php $gallery = get_post_meta(get_the_ID(), HORIZON_LISTING_PREFIX . 'gallery', true); ?> 
    <?php if (! empty($gallery) && is_array($gallery)) : ?> 
     <div class="listing-detail-section" id="listing-detail-section-gallery"> 
      <h2 class="page-header"><?php echo $section_title; ?></h2> 

      <div class="listing-detail-gallery-wrapper" > 
       <div class="listing-detail-gallery" > 
        <?php $index = 0; ?> 
        <?php foreach ($gallery as $id => $src) : ?> 
         <?php $img = wp_get_attachment_image_src($id, 'large'); ?> 
         <?php $src = $img[0]; ?> 
         <a href="<?php echo esc_url($src); ?>" rel="listing-gallery" data-item-id="<?php echo esc_attr($index++); ?>"> 
          <span class="item-image" data-background-image="<?php echo esc_url($src); ?>"></span><!-- /.item-image --> 
         </a> 
        <?php endforeach; ?> 
       </div> 


       <!-- /.listing-detail-gallery --> 

       <div class="listing-detail-gallery-preview" data-count="<?php echo count($gallery) ?>"> 
        <div class="listing-detail-gallery-preview-inner"> 
         <?php $index = 0; ?> 
         <?php foreach ($gallery as $id => $src) : ?> 
          <div data-item-id="<?php echo esc_attr($index++); ?>"> 
           <?php $img = wp_get_attachment_image_src($id, 'thumbnail'); ?> 
           <?php $img_src = $img[0]; ?> 
           <img src="<?php echo $img_src; ?>" alt=""> 
          </div> 
         <?php endforeach; ?> 
        </div><!-- /.listing-detail-gallery-preview-inner --> 
       </div><!-- /.listing-detail-gallery-preview --> 
      </div><!-- /.listing-detail-gallery-wrapper --> 
     </div><!-- /.listing-detail-section --> 
    <?php endif; ?> 
<?php endif; ?>

источник

2017-02-16 Kevin

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

Если вы хотите закодировать это самостоятельно, то вам нужно будет применить некоторые изменения в CSS и добавить яваскрипт кода для создания навигации для слайдера. Простейшим способом сделать это будет использование, например, jQuery, скрытие всех изображений и отображение только одного просматриваемого объекта. Вы можете использовать кнопки навигации для отображения/скрытия фотографий.

Более продвинутое решение, которое предоставляет дополнительные возможности, будет использовать ползунок плагин, как это, например: https://wordpress.org/plugins/ultimate-responsive-image-slider/

источник

2017-02-16 08:22:36

Как изменить миниатюру галереи WordPress на раздвижные?

ответ

Смежные вопросы