ユーティリティ

2017年08月

- - 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

エントリー

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('http://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で表示する場合 を参考にしてください。

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)