ユーティリティ

2019年07月

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

ページ移動

関連エントリー

コメント

鯖缶

ccc様
コメント失礼いたします、カスタマイズ集いつも参考にさせていただいてます。
今回こちらの記事を参考にfancybox3の方を導入してみました。
jQueryを最新版3.31にし、記事の手順通りに設置したところ問題なく動いております。
(ネタバレボタンなど他のjQueryプラグインにも影響はありませんでした)
そこでおうかがいしたいのですが、画像のグループ表示はエントリーでも設定することは可能でしょうか?

fancybox3では<a rel="lightbox" href="…でグループ表示ができなかったため、fancybox3の公式サイトを参考に
(以下メディア表示プラグイン templates/plugins/media_list/default.html の15、32、34行目)

<a href="{$freo.core.http_file}/media_list?directory={if $smarty.get.directory}{$smarty.get.directory}/{/if}{$media_list.name}"

の直後に

data-fancybox="group"

を追加することでグループ表示が可能となりました。他、ページ一括表示プラグインのテンプレートも同様です。

ただエントリー(entry/default、view/default)ではこれが効かないようで困っております。
rel="lightbox"の追加やhttp://freo.jp/support/view/1114#article_1121の方法も試しましたが、うまくいきませんでした。

バージョン違いの質問で申し訳ありませんが、もしご存知でしたらお答えいただけるとたすかります。よろしくお願いします。

  • 2018/12/12 21:43:08

ccc

ただエントリー(entry/default、view/default)ではこれが効かないようで困っております。

上記7.の templates/internals/admin/iframe_media.html で挿入する部分を

rel=&quot;lightbox&quot;

から

data-fancybox=&quot;group&quot;

に変えてみてください(" を &quot; にエスケープ処理する必要があります)

  • URL
  • 2018/12/16 22:39:15

鯖缶

返信ありがとうございます。
お答えいただいた方法を試そうとしたのですが、iframeの挙動がおかしく(iframe.js?が動かないため)導入を断念して元のcolorboxに戻しました。
せっかくお答えいただいたのに申し訳ありません。もう少し勉強してから再挑戦したいと思います。

  • 2018/12/18 21:55:51

コメント登録

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