Wordpressカスタムフィールド：画像のギャラリー表示

Wordpressのカスタムフィールドで「繰り返し（グループ）機能」が標準装備のプラグインSmart Custom Fieldsで下記の項目を作りました。
(1) 項目＝photo（画像）
(2) 項目＝photo-g（画像）/繰り返しグループ名＝photo-group

この画像を使って、大きい画像１つの下に小さいサムネイル画像を繰り返しの数だけ配置し、サムネイル画像をクリックするとクリックした画像が大きい画像の場所に表示される、というギャラリーを作成しようと下記記述しました。

（ギャラリー表示参考サイト
http://www.red.oit-net.jp/tatsuya/java/image3.htm）

しかし、ページ表示時に、小さいサムネイル画像は表示されるのですが、大きい画像が表示されません。サムネイル画像を一度クリックすると、大きい画像も表示されるのですが。
下記の以下１１行の記述がおかしいのだと思います。
現在、大きい画像は項目”photo”から取ってくるようにしていますが、出来るならば繰り返しグループ”photo-group”の１つ目の項目”photo-g”から取ってきたいのですが繰り返しの１つ目、という指定方法も分かりません。
“photo”からでも” photo-g”からでもよいのですが、最初から大きい画像を表示するにはどう連ればよいのか教えて下さい。

<table class="work_gyaraly"> <!—大きい画像--> <?php $size = "medium"; // (thumbnail, medium, large, full or custom size) $image = wp_get_attachment_image_src( $fields['photo'], $size ); $alt = get_post_meta($fields['photo'], '_wp_attachment_image_alt', true); $image_title = $fields['photo']->post_title; ?> <TR> <TD colspan="7" class="work_bigimage"> <IMG src="<?php echo $image[0]; ?>" name="myBigImage"> </TD> </TR>

<!—小さいサムネイル画像-->
<?php
$repeat_group = SCF::get( 'photo-group' );
foreach ( $repeat_group as $fields ) {

    $size = "medium"; // (thumbnail, medium, large, full or custom size)
    $image = wp_get_attachment_image_src( $fields['photo-g'], $size );
    $alt = get_post_meta($fields['photo-g'], '_wp_attachment_image_alt', true);
    $image_title = $fields['photo-g']->post_title;
    ?>

<TR class="test"> <TD class="work_smallimage"> <a href="javascript:void(0)" onmouseover="myChgPic( '<?php echo $image[0]; ?>' )"> <img src="<?php echo $image[0]; ?>" width="80" height="80" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" /> </a> </TD> <?php } ?> </TR> </TABLE>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> </SCRIPT>

自力では解決できず、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく、4行目ですね。

$size = "medium"; // (thumbnail, medium, large, full or custom size)

リファレンスに書いてあるとおりここで取得する画像のサイズを指定するので。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_src

以下のようにしてあげれば 640px x 640pxの画像になります。fullなら原寸大です。

$size = "large";

以下にサイズのデフォルト値書いてありますので参考までに。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)

the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

確認、よろしくお願いします。

投稿2015/10/17 15:53