サポート » プラグイン » advanced custom fieldsで挿入した画像を拡大表示させたい

  • 解決済 heght

    (@heght)


    advanced custom fieldsで作成したカスタムフィールドで
    画像を挿入出来るようにしています。
    そこで、挿入した画像を拡大して表示したいのですが、
    どうすればいいのでしょうか?

    現状は、以下のコードで画像を表示しています

    <?php
    $image_id = post_custom('タクソノミー名');
    echo wp_get_attachment_image($image_id, $size);
    ?>

    wp jquery lightboxやlightbox plus colorboxなど、
    lightboxに関するプラグインをいくつか挿入して試してみましたが、
    「メディアを追加」で挿入した画像は問題ないものの、
    advanced custom fieldsの画像挿入で挿入した画像は
    拡大表示することが出来ませんでした。

    なには方法はありませんでしょうか?

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • heghtさんがイメージしてるものを実装してます。
    ただ、組み合わせただけなので他にシンプルな書き方があるかもしれません。

    Lightbox Plus ColorBoxプラグインを入れて、 リンクタグにrel=”lightbox”でライトボックスが開きます。

    <?php $files = get_post_meta($post->ID, '_thumbnail_id', true);
       $file = wp_get_attachment_url($files);?>
    	<a href="<?php echo clean_url($file); ?>" rel="lightbox">
    
    		<?php $image_id = post_custom('タクソノミー名');
    		echo wp_get_attachment_image($image_id, $size);?></a>
    トピック投稿者 heght

    (@heght)

    kurousa.007さん
    ご返信ありがとうございます。

    kurousa.007さんのコードを、私が最初に貼り付けたコードと
    入れ替えました。
    その結果、画像の上にカーソルを合わせると、
    カーソルには変化が見られたのですが、
    クリックしても特に変化が見られませんでした。
    (最初の私のコードは、カーソルの変化も見られませんでした。)

    初歩的な質問かもしれませんが、
    advanced custom fieldsやlightbox plus colorboxなどで
    なにか設定の必要があるのでしょうか?

    また、kurousa.007さんのコードも、’タクソノミー名’の部分を
    変更して貼り付けたという形なのですが、
    他にコードを変更させるべき点などあるのでしょうか?

    ご回答いただけますと嬉しく思います。

    うむむむ。

    lightbox plus colorboxは特に設定してないです。
    自分のコードの空白を調整していて、そのまま貼り付けるとエラーがでたので、テンプレートのをそのまま貼ってみます。

    <?php $files = get_post_meta($post->ID, '_thumbnail_id', true);
    			$file = wp_get_attachment_url($files);?>
    		<a href="<?php echo clean_url($file); ?>" rel="lightbox">
    
    		<?php
    				$image_id = post_custom('photo');
    				echo wp_get_attachment_image($image_id, $size);
    
    			?></a>

    あまりお役に立てず…m(_ _)m

    トピック投稿者 heght

    (@heght)

    kurousa.007さん
    お付き合いいただきありがとうございます。

    新しくコードを記載していただいたので、
    コピーさせていただき、貼り付けてみたところ、
    前回と変化が見られませんでした。

    ただ、kurousa.007さんには、
    ここまでしていただき、大変感謝いたします。

    引き続き情報をいただきたいので、
    以下に状況を記載しておきます。

    ご回答をいただけますと幸いです

    状況
    ・コードを貼りつけたことで、カーソルに変化が見られたが、
     画像をクリックしても特に変化が見られなかった
    ・advanced custom fieldsで画像を取り込み、
     その画像をドラッグして投稿画面の記事を書く部分に貼り付けて
     投稿してみたところ、記事内の画像はクリックしてlightboxが機能した

    という様子です。
    その他必要な情報がありましたら、出来る限りの範囲で記載しますので、
    なにか方法などありましたら、ぜひご回答お願い致します。

    <?php if(get_field('image') ){ ?><?php $attachment_id = get_field('image');$sizef ='full'; $size ='thumbnail'; $imagef = wp_get_attachment_image_src( $attachment_id, $sizef ); $image = wp_get_attachment_image_src( $attachment_id, $size ); ?><a href="<?php echo $imagef[0]; ?>"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php the_title(); ?>" /></a><?php } ?>
    私はいつも、こんな感じで書いてます。Advanced Custom Fields はIDで保存する設定にしてください。
    ライトボックスはjQuery Colorboxなら自動設定が出来ますが、rel が必要な場合は入れてください。

    トピック投稿者 heght

    (@heght)

    orangethymeさん
    ご返信ありがとうございます。

    orangethymeさんが記載してくださいましたコードを貼り付けて、
    advanced custom fieldsをIDで保存する設定にしてみましたところ、
    表現が難しいのですが、
    画像をクリックすることで別のページに飛んで
    画像が拡大表示されたという感じでした
    (その時は、URLが’wp-content/uploads/年と月/画像URL’という感じでした)

    lightboxについてですが、
    私が理解できていなくて大変申し訳ないのですが、
    lightbox plus colorboxは導入しても特に変化が見られませんでした。
    また、wp jquery lightboxを導入して、自動で出来るようにチェックを
    入れたのですが、特に変化が見られませんでした。

    大変わがままな話で申し訳ないのですが、
    lightboxで表示するということは可能なのでしょうか?
    また、なにか必要な設定やコードの修正などはあるのでしょうか?
    教えていただけますと幸いです。

    http://wordpress.org/plugins/jquery-colorbox/

    Automate jQuery Colorbox for all other images:
    にチェックを入れると、全ての画像リンクでライトボックスが有効になります。
    その他のプラグインの場合は a タグに rel=”lightbox” が必要な場合が多いです。

    トピック投稿者 heght

    (@heght)

    orangethymeさん
    わがままな質問にご返信いただき、ありがとうございます。

    jquery colorboxを使用し、
    orangethymeさんが示してくださいましたコードを利用することで、
    advanced custom fieldsからの画像挿入の拡大が可能となりました。

    ありがとうございます。

    他のプラグインも試したのですが、どれも上手に機能しませんでした
    (原因がわかりませんが、jquery colorbox以外のプラグインを
     いくつか試してみたものの、ダメでした)

    ただ、当初の目的は達成することが出来ましたので、
    いったん解決済みとさせていただきます。

    kurousa.007さんとorangethymeさんの
    お二方にはご迷惑をおかけすると同時に大変お世話になりました。
    本当にありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「advanced custom fieldsで挿入した画像を拡大表示させたい」には新たに返信することはできません。