freoカスタマイズ集

colorboxと違って標準でレスポンシブにも対応しているfancyboxをfreoに導入する方法を紹介します。
※動作は こちら で確認できます。

1. fancybox の「License / Download」より「Download v2.xx」をダウンロードします。
2. ダウンロードしたものを解凍し、以下のファイルをfreoの次のフォルダ内に移します。
   • source/jquery.fancybox.js ⇒ js フォルダ
   • source/jquery.fancybox.css ⇒ css フォルダ
   • source/blank.gif、source/fancybox_loading.gif、source/fancybox_overlay.png、source/fancybox_sprite.png ⇒ images フォルダ内に fancybox フォルダを作成してその中に、

   freo
    ┣ css ━ jquery.fancybox.css
    ┣ js ━ jquery.fancybox.js
    ┗ images ━ fancybox ┳ blank.gif
                          ┣ fancybox_loading.gif
                          ┣ fancybox_overlay.png
                          ┗ fancybox_sprite.png

3. 移動した css/jquery.fancybox.css をエディタで開き、全ての

   url('ファイル名')

   の部分を、

   url('https://cccabinet.jpn.org/images/fancybox/ファイル名')

   に置換（赤字部分を追加）します。
4. ヘッダテンプレートの変更
   templates/header.html、templates/internals/admin/header.html、templates/internals/admin/iframe_header.html（PC用）、templates/iphone/header.html、templates/iphone/iframe_header.html（iPhone用）をエディタで開き、

   <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}jquery.fancybox.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}jquery.fancybox.js"></script>

   にそれぞれ変更（緑字を赤字に）します。
5. jsファイルの変更
   • js/admin.js、js/default.js、js/iframe.js（PC用）をエディタで開き、

       //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();
     
       $('a.colorbox').colorbox({ width:'80%', height:'80%', iframe:true });

     の部分を、

       //fancyBox
       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).fancybox();
     
       $('a.colorbox').fancybox({ width:'80%', height:'80%', type:'iframe', autoSize : false });

     にそれぞれ変更（緑字を赤字に）します。
     次に、js/iframe.js をエディタで開き、32行目あたりにある

     parent.$.fn.colorbox.close();

     の部分を、

     parent.$.fancybox.close();

     に変更（緑字を赤字に）します。
     ※漫画表示プラグインを導入しているときは//漫画挿入の部分にも同じものがあるのでそれも変更します。
   • また、js/iphone/common.js（iPhone用）をエディタで開き、

       //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();
     
       $('a.colorbox').colorbox({ width:'90%', height:'90%', iframe:true });

     の部分を、

       //fancyBox
       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).fancybox();
     
       $('a.colorbox').fancybox({ width:'90%', height:'90%', type:'iframe', autoSize : false, padding: 0 });

     に変更（緑字を赤字に）します。
6. css/colorbox.css、js/jquery.colorbox.js、images/colorbox/ フォルダは削除してもOKです。
7. メディアテンプレートの編集
   • メディア挿入 ⇒ 複数の画像をグループで表示させたい場合（既に挿入された画像には適用されません）
     templates/internals/admin/iframe_media.html（PC用）、templates/iphone/internals/admin/iframe_media.html（iPhone用）をエディタで開き、

     title="<a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}

     の部分をすべて

     title="<a rel="lightbox" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}

     に置換（赤字を追加、lightboxの部分は任意のものでOK）します。
   • メディア一括表示プラグインで表示される画像をグループで表示させたい場合
     templates/plugins/media_all/media_all.html をエディタで開き、

     <a href="{$freo.core.http_url}{$media_all.id}"

     の部分をすべて

     <a rel="lightbox" href="{$freo.core.http_url}{$media_all.id}"

     に置換（赤字を追加、lightboxの部分は任意のものでOK）します。
   • メディア表示プラグインで表示される画像をグループで表示させたい場合
     templates/plugins/media_list/default.html をエディタで開き、

     <a href="{$freo.core.http_url}{$media_list.id}"

     の部分をすべて

     <a rel="lightbox" href="{$freo.core.http_url}{$media_list.id}"

     に置換（赤字を追加、lightboxの部分は任意のものでOK）します。
8. 既に挿入した画像をグループで表示させたい場合
   freoのentry（またはpage）で複数画像をcolorboxで表示する場合 を参考にしてください。