baserCMSはブログ用テンプレートで「Colorbox」を使用するようにdefaultで読み込まれているけど、固定ページでは読み込まれていません。
なので、ブログでも固定ページでも「Colorbox」が使用できるように設定する手順の作業メモです。
※ついでにレスポンシブ対応もここで済ませます。
※Colorboxのバージョンは使用中のbaserCMSに同封のものを指定。
１．
[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' ?>
２．
実行するために以下の記述をボディ部分に追記
<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>
３．
[theme_name]/css/colorbox/colorbox.css
に以下を追加してCSSを調整
#cboxLoadedContent,img{width: 100%;}
４．
[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>