個人用ツール

画像をライトボックス風に表示させたい

提供: 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属性の付与を自動で行ってくれます。