エントリー

freoでfancyBox2を導入するには

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

  1. fancybox の「License / Download」より「Download v2.xx」をダウンロードします。
  2. ダウンロードしたものを解凍し、以下のファイルをfreoの次のフォルダ内に移します。
    • source/jquery.fancybox.jsjs フォルダ
    • source/jquery.fancybox.csscss フォルダ
    • source/blank.gifsource/fancybox_loading.gifsource/fancybox_overlay.pngsource/fancybox_sprite.pngimages フォルダ内に fancybox フォルダを作成してその中に、
    freocssjquery.fancybox.cssjsjquery.fancybox.jsimagesfancyboxblank.giffancybox_loading.giffancybox_overlay.pngfancybox_sprite.png
  3. 移動した css/jquery.fancybox.css をエディタで開き、全ての
    url('ファイル名')

    の部分を、

    url('https://cccabinet.jpn.org/images/fancybox/ファイル名')
    に置換(赤字部分を追加)します。
  4. ヘッダテンプレートの変更
    templates/header.html
    templates/internals/admin/header.htmltemplates/internals/admin/iframe_header.html(PC用)、templates/iphone/header.htmltemplates/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.jsjs/default.jsjs/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.cssjs/jquery.colorbox.jsimages/colorbox/ フォルダは削除してもOKです。
  7. メディアテンプレートの編集
    • メディア挿入 ⇒ 複数の画像をグループで表示させたい場合(既に挿入された画像には適用されません)
      templates/internals/admin/iframe_media.html(PC用)、templates/iphone/internals/admin/iframe_media.html(iPhone用)をエディタで開き、
      title="&lt;a href=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}

      の部分をすべて

      title="&lt;a rel=&quot;lightbox&quot; href=&quot;{$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で表示する場合 を参考にしてください。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年12月

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed