ワードプレスイメージギャラリーサムネイルグリッド - クリックして詳細を表示

Question

私はカスタムポートフォリオテンプレートページを使ってギャラリーのすべての投稿を表示しています。ギャラリーの中にはイメージがたくさんあるので、ページのスクロールを最小限に抑えるためにそれらを折りたたんでいます。

残りのサムネイルを表示する「負荷より」ボタンをクリックし、ページのロード時に、グリッド内のサムネイルの最初の行を表示するための最良の方法は何ですか？

私はWPのget_post_gallery（）関数を追跡しようとしているが、よりロードするためにクリックして、最初のいくつかのサムネイルをロードするように指示するかどうかはわかりません。私が何とかBootstrap 3の折りたたみ/展開コードを利用することができれば、私はそのフレームワークをウェブサイトで使用しているので、それは素晴らしいことです。

は私が達成しようとしています何のモックアップを含ま： View Mockup

https://codex.wordpress.org/Function_Reference/get_post_gallery

<?php 
 
    /* The loop */ 
 
    while (have_posts()) : the_post(); 
 
     if (get_post_gallery()) : 
 
      $gallery = get_post_gallery(get_the_ID(), false); 
 
      
 
      /* Loop through all the image and output them one by one */ 
 
      foreach($gallery['src'] as $src) : ?> 
 
       <img src="<?php echo $src; ?>" class="my-custom-class" alt="Gallery image" /> 
 
       <?php 
 
      endforeach; 
 
     endif; 
 
    endwhile; 
 
?>

Answer 1

をあなたがtrueに$ dataパラメータを使用してギャラリーを取得する場合、あなたができます配列を循環させ、通常の方法でshow/hideを使用してください！あなたはパーマリンクを使用しようとしている場合

$return_array = get_post_gallery(get_the_ID(), true); 

これは配列を返しますが、その配列は、その構造

'link' => string 'file' 
    'ids' => string 'id1,id2,id3' 
    'src' => 
    array 
     0 => string 'http://yoursite/moo.jpg' 
     2 => string 'http://yoursite/moo2.jpg' 
     3 => string 'http://yoursite/moo3.jpg' 

を持って、あなたは

$ids_Array = explode(',',return_array["ids"]); 

で別の配列にIDの文字列を分割しました

することができます、ループその配列とブートストラップの崩壊構造あなたが望む方法を構築

（3つのループます出力区切り容器等の後）

ご質問がある場合はお知らせください。