質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,450

score 12

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

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

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

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

<!--<head>内に下記記述-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
<!--
function myChgPic(myPicURL){
   document.images["myBigImage"].src = myPicURL;
}
// --></SCRIPT>


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

おそらく、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/19 14:36

    ありがとうございました。
    おかげさまで、無事解決しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る