Web Liberty&freoカスタマイズ集

Slimbox2はjQueryをベースにしているのでfreoには導入しやすいです。
※デフォルトでThickBoxからColorBox変更になったのでそっちで充分かも(^^;)
※2012.12.3現在、最新版のver2.0.4はモバイルで使用すると無効になります。またインラインフレームにも未対応なので管理画面ではColorBoxを使用します。

※2012.12.3に全面的に記事を改訂しました。

1. Slimbox2 - Download のページより「Slimbox 2.xx」をダウンロードします。
2. ダウンロードしたものを解凍し、以下のファイルをfreoの次のディレクトリにアップします。
   • js/slimbox2.js ⇒ js/ へ
   • css/slimbox2.css ⇒ css/ ヘ
   • css/closelabel.gif、css/loading.gif、css/nextlabel.gif、css/prevlabel.gif ⇒ images/ 内に slimbox2/ を作成してその中へ

   freo
    ┣ js ━ slimbox2.js
    ┣ css ━ slimbox2.css
    ┗ images ━ slimbox2 ┳ closelabel.gif
                          ┣ loading.gif
                          ┣ nextlabel.gif
                          ┗ prevlabel.gif

3. アップした css/slimbox2.css の

   url(ファイル名)

   の部分を、

   url(../images/slimbox2/ファイル名)

   に置換（赤字を追加）します。
4. templates/header.html の

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />

   の部分を、

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}slimbox2.css" type="text/css" media="all" />

   に、
   また

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.colorbox.js"></script>

   の部分を、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}slimbox2.js"></script>

   にそれぞれ変更（緑字を赤字に）します。
5. js/default.js の

   //ColorBox
   var extensions = ['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'jpe', 'JPE', 'png', 'PNG'];
   
   var target = '';
   $.each(extensions, function() {
     if (target) {
       target += ',';
     }
     target += 'a[href$=¥'.' + this + '¥']';
   });
   $(target).colorbox();

   の部分を、

   //画像表示スクリプト
   var extensions = ['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'jpe', 'JPE', 'png', 'PNG'];
   
   var target = '';
   $.each(extensions, function() {
     if (target) {
       target += ',';
     }
     target += 'a[href$=¥'.' + this + '¥']';
   });
   $(target).slimbox();

   に変更（緑字を赤字に）します。