ratio_3_2 のカスタマイズ方法

【jQuery】colorboxで画像をポップアップさせる方法 baserCMS ratio_3_2

【jQuery】colorboxで画像をポップアップさせる方法 baserCMS ratio_3_2

画像のポップアップとは?

百聞は一見にしかずという事で、まずはこちらの画像をクリック(タップ)してみて下さい。
画像以外の部分orバツボタンをタップすると戻ります
2017.toritohoshizora.jpg

続いてテーマratio_3_2をインストールしただけの状態です。
↓初期の状態↓ブラウザの戻るボタンでお戻り下さいm(_ _)m
2017.toritohoshizora.jpg
画像だけが表示されたと思います。 このままでは、元のページに戻るのにバックボタンを押す手間が掛かってしまいます。(訪問者からすると面倒くさいサイトだと思われるかもしれません)

こちらをポップアップ処理させるとこうなります。

↓ポップアップ処理済み↓(画像以外の部分orバツボタンをタップすると戻ります)
2017.toritohoshizora.jpg

いかがでしょうか。こちらの方が見栄え的にもユーザーにとっても良いかと思います。

このページでは、この様に画像をポップアップ処理する方法をご紹介いたします。


スポンサードリンク

用意するもの


配布先からプラグイン一式をダウンロードしてきます。
http://www.jacklmoore.com/colorbox/​
カラーボックス colorbox 配布元画像

ダウンロードしたZIPファイルを解凍するとこの様になっています。
当サイトでは緑枠で囲ったファイルを使用しています。
colorbox 解凍状態
↓exmaple2 の中身↓
colorbox2.png

必要なファイルは以下の通りです。

・jquery.colorbox-min.js
・example2/colorbox.css
・example2/images/controls.png
・example2/images/loading.gif

これらを配置していきます。

1.FTPソフトを使ってテーマの中のJSフォルダの中にアップロードします。
※配置場所を間違えないように注意して下さい。
colorboxのjsファイルの設置

2.example2 の中のCSSとimagesファイルをテーマ内のCSSフォルダ内にアップロードします。この場所にimages を配置しないと矢印などのパーツが表示されません。
colorboxのCSSと画像の設置

これで、準備は整いました。

次はおまじないをかけるためにダッシュボードに移動します。

テーマ管理 → 現在のテーマ管理 → レイアウトテンプレート 一覧(このページをブックマーク)→ javaScript一覧へ移動します。
kanri1.png
kanri2.png
kanri3.png

javaScript一覧画面に移動出来たら、編集をクリックします。
kanri4.png

jquery.colorbox-min.jsの編集画面です。
kanri4.5.png
ファイル内の1番下までスクロールします。

kanri5.png
コードの一番最後に下記のおまじない(実行コード)を追加して保存します。(オプション付き)

$(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行目辺りです。
kanri7.png

実際のソース(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にも同じ様に読み込ませます。(固定ページに反映します)
kanri8.png

こちらも同様にCSSとjavaScriptを読み込ませる様に書き加えます。
kanri9.png

実際のコード(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です。

ポップアップ処理をさせたくない場合

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。

ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

baserCMS

CakePHP(tm) : Rapid Development Framework