
画像のポップアップとは?
百聞は一見にしかずという事で、まずはこちらの画像をクリック(タップ)してみて下さい。
画像以外の部分orバツボタンをタップすると戻ります
続いてテーマratio_3_2をインストールしただけの状態です。
↓初期の状態↓ブラウザの戻るボタンでお戻り下さいm(_ _)m
画像だけが表示されたと思います。 このままでは、元のページに戻るのにバックボタンを押す手間が掛かってしまいます。(訪問者からすると面倒くさいサイトだと思われるかもしれません)
こちらをポップアップ処理させるとこうなります。
↓ポップアップ処理済み↓(画像以外の部分orバツボタンをタップすると戻ります)
いかがでしょうか。こちらの方が見栄え的にもユーザーにとっても良いかと思います。
このページでは、この様に画像をポップアップ処理する方法をご紹介いたします。
用意するもの
配布先からプラグイン一式をダウンロードしてきます。
http://www.jacklmoore.com/colorbox/
ダウンロードしたZIPファイルを解凍するとこの様になっています。
当サイトでは緑枠で囲ったファイルを使用しています。
↓exmaple2 の中身↓
必要なファイルは以下の通りです。
・jquery.colorbox-min.js
・example2/colorbox.css
・example2/images/controls.png
・example2/images/loading.gif
これらを配置していきます。
1.FTPソフトを使ってテーマの中のJSフォルダの中にアップロードします。
※配置場所を間違えないように注意して下さい。
2.example2 の中のCSSとimagesファイルをテーマ内のCSSフォルダ内にアップロードします。この場所にimages を配置しないと矢印などのパーツが表示されません。
これで、準備は整いました。
次はおまじないをかけるためにダッシュボードに移動します。
テーマ管理 → 現在のテーマ管理 → レイアウトテンプレート 一覧(このページをブックマーク)→ javaScript一覧へ移動します。
javaScript一覧画面に移動出来たら、編集をクリックします。
jquery.colorbox-min.jsの編集画面です。
ファイル内の1番下までスクロールします。
コードの一番最後に下記のおまじない(実行コード)を追加して保存します。(オプション付き)
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({
transition:"fade",
maxWidth:"90%",
maxHeight:"90%",
opacity: 0.7
});
});
もうすぐ完成です!頑張りましょう!
3.次にアップロードした CSS と javaScript を読み込ませる作業をします。
先程、作ったショートカットを利用してレイアウトファイルに移動します。
まずはblog.phpから編集します。(心配な方はコピー(バックアップ)を作っておいて下さい)
ファイルを開いて、下記のようにそれぞれ読み込ませるファイルを追加します。
上から20行目辺りです。
実際のソース(blog.php)です。該当箇所をコピペして頂いて結構です。(customも含めて。 別の項目で使います^^;)
<?php $this->BcBaser->element('meta_extra'); ?>
<?php $this->BcBaser->css(array(
'bootstrap.min',
'font-awesome.min',
'style.min',
'colorbox',
'custom'
)) ?>
<?php $this->BcBaser->js(array(
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
'bootstrap.min',
'jquery.colorbox-min'
)); ?>
<?php $this->BcBaser->scripts() ?>
続いて、default.phpにも同じ様に読み込ませます。(固定ページに反映します)
こちらも同様にCSSとjavaScriptを読み込ませる様に書き加えます。
実際のコード(default.php)
<?php $this->BcBaser->element('meta_extra'); ?>
<?php $this->BcBaser->css(array(
'bootstrap.min',
'font-awesome.min',
'style.min',
'colorbox',
'custom'
)) ?>
<?php $this->BcBaser->js(array(
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
'bootstrap.min',
'jquery.colorbox-min'
)); ?>
<?php $this->BcBaser->scripts() ?>
画面下にある保存を押して作業終了です。
お疲れ様でした!
実際にアップロードした画像のあるページを更新して頂いて、ポップアップすれば成功です。
ポップアップしない原因
キャッシュ(一時メモリ・ファイル)が残っている。
→ キャッシュを削除するうまく読み込めていない(誤字がある)
CSS・javaScriptのアップロード先が間違っている
→ もう一度確認して下さい。
上記のいずれかだと思いますので再確認して下さい。(最初は誰でもつまづく物ですので、焦らずに一息ついてご確認下さい^^;)
参考にさせて頂いたページです(オプションなどもとても参考になります)
→ Colorboxで色んなモーダルウィンドウを作ってみるうまく出来るとこの様な事も出来ます♪
↓タップしてみて下さい↓

これで、アップロードした画像はすべて自動でポップアップされます。(アイキャッチ画像は除く)
もし、ポップアップさせたくない場合は、画像のソースから "colorbox" を取り除けばOKです。
お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。