エントリー
freoのentry（またはpage）で複数画像をcolorboxで表示する場合
- freoに画像をアップ（サムネイル使用）しておき、エントリー（またはページ）に画像の挿入を行います。
- 挿入した画像をクリックし、「リンクの挿入/編集」ボタン（画像の赤丸で囲んだボタン）をクリックします。
- 「リンクの挿入/編集」ウィンドウが表示されたら、
「上級者向け」「専門的」タブをクリックします。
「このページのターゲットに対する関係」「ページからターゲットの関係」のところを設定します（画像の例は「Lightbox」ですが何でも可）。この部分は同じ記事内では統一してください。設定できたら「更新」ボタンをクリックします。 - 画像にタイトルを表示したい場合は、「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブのタイトルのところを設定します。
- すべての画像に設定が完了したら登録を行います。
登録した記事から画像をクリックすると、
のように上部にタイトル（設定した場合）と移動ボタンが追加されます。
次の画像に進むには画像右上の [
] をクリックし、前の画像に戻るには画像右上の [
] をクリックします。
画像を閉じるには、画像右上の [
] をクリックします。
※実装してみた感じ ⇒ こちら
※スライドショー形式（自動で画像切り替え）で表示したい場合は こちら を参考にしてください。
関連エントリー
- 2013/07/19 freoのColorboxを最新版にする
- 2013/02/20 freoの画像表示でColorBoxを画面からはみ出さないよう設定するには
- 2012/12/03 freoでfancyBox2を導入するには
- 2012/10/24 freoのentry（またはpage）で複数画像をcolorboxのスライドショーで表示する場合
- 2012/10/24 freoでYouTube動画を貼り付けるTinyMCEプラグイン(colorboxで表示)
- 2012/06/20 freoでYouTube動画を貼り付けるTinyMCEプラグイン(埋め込み表示)
- 2011/01/29 freoでHighslide JSを導入するには（応用編）
- 2011/01/28 freoでHighslide JSを導入するには（基本編）
- 2011/01/10 freoのentry（またはpage）でYouTube動画をcolorboxで表示する場合
- 2010/06/08 freoでSlimbox2を導入するには
コメント
ccc
上の画面はあらかじめ画像を挿入してから設定しているのでボタンは「更新」になります。画像がまだ設定されてない場合は「挿入」になります。複数表示の設定する場合は先に一旦画像を登録（メディア挿入）してからになります。
- URL
- 2011/05/16 22:35:00
マルサ
返信ありがとうございました。
てっきり「更新」「挿入」の違いで複数画像表示ができないものと思い込んでいました。
うまく設定できなかった原因は何とか自己解決できました。
手順(4)でリンクURLを指定し忘れていたことに原因があったようです。
お騒がせして申し訳ありませんでした。
- 2011/05/17 02:36:00
とおりすがり
エントリー内の画像を、レイアウトを崩さないように表示しつつ、クリックすると原寸で表示する方法がわからなかったのでこの方法はすごく参考になりました。
どうもありがとうございました。
- 2011/05/23 16:13:00
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
マルサ
非常に有用なカスタマイズ集を作成していただき、ありがとうございます。
このたび記事を参考に、colorboxで複数画像を表示させてみようと思ったのですが
一点だけ質問させていただきたいことがあり、コメントを投稿させていただきました。
「リンクの挿入/編集」ウィンドウについてですが、なぜか記事のように
「更新」のボタンではなく「挿入」というボタンが表示されてしまいます。
「更新」の代わりに「挿入」ボタンを使用し、記事の通り
複数画像の設置手順を踏んでみましたができませんでした。
colorboxを念のため最新版に差し替えてみましたが状況は変わりありません。
なぜ「更新」ボタンが表示されないのか、もしお心当たりが
ございましたらご教示いただければ幸いです。
どうぞよろしくお願いします。