【技術メモ】baser CMSライトボックス風のjQueryプラグイン「Colorbox」を使用する

baserCMSはブログ用テンプレートで「Colorbox」を使用するようにdefaultで読み込まれているけど、固定ページでは読み込まれていません。
なので、ブログでも固定ページでも「Colorbox」が使用できるように設定する手順の作業メモです。
※ついでにレスポンシブ対応もここで済ませます。
※Colorboxのバージョンは使用中のbaserCMSに同封のものを指定。

 

1.

[theme_name]/Layouts/default.php

[theme_name]/Layouts/smartphone/default.php
のヘッダ部分に以下のCSSとjsを追記

<?php $this->BcBaser->css('admin/colorbox/colorbox') ?>
<?php $this->BcBaser->js('admin/jquery.colorbox-min-1.4.5' ?>

 

2.

実行するために以下の記述をボディ部分に追記

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

 

3.

[theme_name]/css/colorbox/colorbox.css
に以下を追加してCSSを調整

#cboxLoadedContent,img{width: 100%;}

 

4.

[theme_name]/Blog/default/index.php
[theme_name]/Blog/default/archives.php
[theme_name]/Blog/default/single.php

以下の記述を削除して、defaultで読み込まれるブログ用テンプレートの「Colorbox」による記述重複を解決しておく。

(ヘッダ部分)
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => true));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
(ボディ部分)
<script type="text/javascript">
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade"});
});
</script>

 

ことうらシステム

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です