freoにfancybox3を導入

国産CMS「freo」は画像や動画をポップアップして表示する用に「Colorbox」が標準装備されていますが、これをレスポンシブ・モバイル対応が万全な「fancybox3」に乗り換えるためのメモです。

fancybox3を利用する方法は以下の二つがあります。

必要ファイルをダウンロードしてきて自分のサーバにアップロードする
CDNで提供されているCSS・スクリプトを読み込む

今回は2.のCDNを利用する方法を解説します。

必要ファイルの読み込み

編集が必要なのは

templates/header.html
templates/internals/admin/header.html
templates/internals/admin/iframe_header.html

colorboxの読み込みタグをfancybox3の読み込みタグに書き換えます

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

を

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />

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

を

<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

に。スクリプトの読み込みタグは「default.js」の読み込みタグより前に記述すること。

リンク付き画像をfancybox3で開くためのjsファイル変更

編集が必要なのは

js/admin.js
js/default.js
js/iframe.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();

$('a.colorbox').colorbox({ width:'80%', height:'80%', iframe:true });

を

//fancybox3
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).attr({'data-fancybox': 'images'});

$('a.colorbox').attr({
    'data-fancybox':'',
    'data-type':'iframe'
});

に書き換えます。さらにjs/iframe.jsの以下の箇所

//メディア挿入
$('a.insert').click(function() {
	if (parent.tinymce.isIE) {
		parent.tinyMCE.activeEditor.focus();
		parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
	}
	parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, $(this).attr('title'));
	parent.$.fn.colorbox.close();
});

を

//メディア挿入
$('a.insert').click(function() {
	if (parent.tinymce.isIE) {
		parent.tinyMCE.activeEditor.focus();
		parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
	}
	parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, $(this).attr('title'));
	parent.$.fancybox.close();
});

に書き換えます。

画像以外をfancybox3で開く

基本的にリンクタグ（<a href～）に「 data-fancybox=""」を記述するとfancybox3で開くことができます。例えば以下のように記述します。

ウェブページをインラインフレームで開く

<a href="http://codepen.io/fancyapps/full/jyEGGG/" data-fancybox="" data-type="iframe"> Webpage </a>

youtube動画

<a href="https://www.youtube.com/watch?v=_sI_Ps7JSEk" data-fancybox=""> YouTube video </a>

fancybox3表示のカスタマイズ

表示のオプションはfancybox3 · Documentationで見ることができます。一例として当サイトでは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).attr({'data-fancybox': 'images'});

$('a.colorbox').attr({
	'data-fancybox':'',
	'data-type':'iframe'
});
$('[data-fancybox]').fancybox({
	// オプションを下記に記載していきます
	loop : true, // 複数画像表示時に最初と最後をループさせる
	toolbar  : false, // ツールバーの非表示
	smallBtn : true, // 小さいCloseボタン利用する
});