「画像をライトボックス風に表示させたい」を編集中

画像をライトボックス風に表示させる方法をご紹介します。ブログ記事中の画像で使う場合と、固定ページ内で使う場合とで少し手順が異なります。

##使用するjQueryプラグイン「Colorbox」
baserCMSには、ライトボックス風の表示を可能にするjQueryプラグインとして、「[Colorbox](http://www.jacklmoore.com/colorbox/)」が同封されています。ブログでも固定ページでもこのColorboxを使用します。

###ブログで利用する
配布されているテーマをお使いの場合、基本的にはブログ用のレイアウトテンプレートで上述のColorboxは読み込まれています（読み込まれていない場合や、独自テーマを作成している場合は、Colorboxの読み込みについて後述の[[#固定ページで利用する]]を参照してください）。

Colorboxの読み込みができている状態であれば、あとは画像のイメージタグ内にrel属性を付与し、値を「colorbox」とします。少し面倒な作業ですが、もしも[アップローダープラグイン](http://barket.jp/products/detail.php?product_id=17)を使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。

###固定ページで利用する
固定ページで利用する場合は、Colorboxの読み込みと、実行のためのjavascriptを記述しなくてはいけません。使用しているレイアウトテンプレーとのヘッダ部分で、以下のようにColorboxを読み込んでください。

<syntaxhighlight lang="php">
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5');
$this->BcBaser->css('admin/colorbox/colorbox');
</syntaxhighlight>

上記は単独でColorbox用のJSとCSSを呼び出していますが、もちろん他のJS、CSSと一緒に呼び出してもらっても構いません。またColorboxにはバージョンがあります。お使いのbaserCMSに同封のものを確認してください。Colorbox本体の場所は
   /lib/Baser/webroot/js/
配下に入っています。

次に実行するための記述をします。これもレイアウトテンプレート内で記述してください。

<syntaxhighlight lang="html">
<script type="text/javascript">
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade",maxWidth:'100%'});
});
</script>
</syntaxhighlight>

あとはブログの時と同じように、画像のimgタグにrel属性を付与し、値を「colorbox」とすれば完了です。もしも[アップローダープラグイン](http://barket.jp/products/detail.php?product_id=17)を使用しているのであれば、画像の挿入時にrel属性の付与を自動で行ってくれます。