2017-02-16 2 views
2

私のウェブサイトのユーザーは写真をページにアップロードできますが、写真がたくさんある場合はサムネイルが下がり続けます。ワードプレスギャラリーのサムネイルをスライディングに変更するには?

ダウンとスペースをたくさん食べ続けるサムネイルのレイアウト:

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

摺サムネイルを変更する方法はありますか?

は、ここでは、これを自分でコーディングする場合は、あなたがCSSでいくつかの変更を適用する必要があり、スライダーのためのナビゲーションを作成するためのJavaScriptコードを追加するコード

<?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; ?> 
+0

代わりに、コードの変更を行うことで、あなたのために簡単になります任意の画像スライダープラグインを使用する:追加機能を提供し

より高度なソリューションは、例えば、次のように、スライダープラグインを使用することです。このコードには多くの依存関係があるため、このコードを変更すると、いくつかの場所で変更を加える必要があります。 –

答えて

0

です。 これを行う最も簡単な方法は、jQueryなどを使用し、すべてのイメージを非表示にし、現在表示されているイメージのみを表示することです。 すべてのナビゲーションボタンを使用して、写真の表示/非表示を調整できます。 https://wordpress.org/plugins/ultimate-responsive-image-slider/

関連する問題