如何将WordPress Gallery缩略图更改为Sliding？

在我的网站上，用户可以将照片上传到一个页面，但如果它有很多照片，缩略图会不断下降。如何将WordPress Gallery缩略图更改为Sliding？

缩略图是不断下降，吃大量的空间布局：

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一些改变，并添加JavaScript代码为滑块创建导航。这样做最简单的方法就是使用jQuery，隐藏所有图像并只显示当前正在查看的图像。您可以使用所有导航按钮来协调显示/隐藏照片。它提供额外的功能

更先进的解决方案是使用滑块插件，像这样的例子：https://wordpress.org/plugins/ultimate-responsive-image-slider/

来源

2017-02-16 08:22:36

如何将WordPress Gallery缩略图更改为Sliding？

回答

相关问题