ver4/画像をライトボックス風に表示させたい
提供: baserCMS公式ガイド
[このコンテンツは内容調整中です]
画像をライトボックス風に表示させる方法をご紹介します。ブログ記事中の画像で使う場合と、固定ページ内で使う場合とで少し手順が異なります。
使用するjQueryプラグイン「Colorbox」
baserCMSには、ライトボックス風の表示を可能にするjQueryプラグインとして、「Colorbox」が同封されています。ブログでも固定ページでもこのColorboxを使用します。
ブログで利用する
配布されているテーマをお使いの場合、基本的にはブログ用のレイアウトテンプレートで上述のColorboxは読み込まれています(読み込まれていない場合や、独自テーマを作成している場合は、Colorboxの読み込みについて後述の#固定ページで利用するを参照してください)。
Colorboxの読み込みができている状態であれば、あとは画像のイメージタグ内にrel属性を付与し、値を「colorbox」とします。少し面倒な作業ですが、もしもアップローダープラグインを使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。
固定ページで利用する
固定ページで利用する場合は、Colorboxの読み込みと、実行のためのjavascriptを記述しなくてはいけません。使用しているレイアウトテンプレーとのヘッダ部分で、以下のようにColorboxを読み込んでください。
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5'); $this->BcBaser->css('admin/colorbox/colorbox');
上記は単独でColorbox用のJSとCSSを呼び出していますが、もちろん他のJS、CSSと一緒に呼び出してもらっても構いません。またColorboxにはバージョンがあります。お使いのbaserCMSに同封のものを確認してください。Colorbox本体の場所は
/lib/Baser/webroot/js/
配下に入っています。
次に実行するための記述をします。これもレイアウトテンプレート内で記述してください。
<script type="text/javascript"> $(function(){ if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade",maxWidth:'100%'}); }); </script>
あとはブログの時と同じように、画像のimgタグにrel属性を付与し、値を「colorbox」とすれば完了です。もしもアップローダープラグインを使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。