な！自転車でやせる >> NP

な！自転車でやせる > 自転車日記 > 記事一覧 > NP_Facebox
<< 前：ひさしぶり「くつした」ゲット | こんなアプローチもありか！：次 >>

2008-01-16

NP_Facebox

←　まずはここをクリック！
ブログに貼り付けた画像をポップアップするのにjavascriptを用いてきた。
使わせていただいたのは
サイズ判断型センタービュー（http://www.coolandcool.net/）
大変便利なのだが、このままだと記事中のサムネイル画像がケータイで表示されない。
それと、記事を書くときいちいちjavascript・・・・などと書くのが面倒でほかに良い方法が無いかと探していた。

プラグインを探してみる

　Lightbox 2というのがある。
lightbox[G]でググると山ほど情報が得られる。
Ajax[G]を利用して画像を表示するライブラリで特徴は「スクリプト(プログラム)を記述しなくてもよい」ことがある。
なんとHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さだ。
とはいえ、いくつかのファイルを適当な場所に置き、それぞれ設定する必要がある。
もしかしたら、Nucleusにはプラグインがあるのではないか。
・・・
　NP_LighboxEXという便利なプラグインがあった。
はやりのlightbox.jsを使ってさらに機能を加えてNucleusのプラグインにしてある。
やっぱり！！！
すぐに取ってきて使ってみた。
実に簡単に見栄えの良い画像ポップアップができてしまった。

別解あり

ところが・・・
ネットをさまよっているとfacebox[G]というのもあるらしい。
Lightbox 2との違いは使用するライブラリが小さく、軽快だと言うこと。
Lightbox 2では有名なprototype.jsが使われている。
豊富な機能が売りらしいが、いかんせん容量も大きい。
その分ネットに負荷がかかるし、ひいては画像表示に時間を要することになる。
その点Faceboxだと使うライブラリがjQueryとなる。
利点はなんといっても軽いこと。
私の場合、元画像のポップアップができれば良いのでFaceboxで十分だ。
早速、インストール。
始め、

jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() })

を書き込んでなくて、いっこうにエフェクトが起こらないので困った。

While calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onLoad.

って、あるじゃないか。
それにFaceboxのホームページのソースを見ればすぐにわかる簡単な話。
めでたくこのブログでもFaceboxを導入することができた。

プラグインにできないか

　さて、先のNP_LighboxEXだが、エフェクトの本体はjavascript。
でphpはNucleusのパース機能を使って、<head>タグ内に必要な記述を展開したり、サムネイル機能の追加に使われている。
機能を追加せず、<head>タグ内に必要な記述を展開するだけなら私にも何とかなるかもしれない。
ということでNP_LighboxEXへのリスペクト、オマージュ。
・・・
パクリ、まねっこ・・・（ケロロ軍曹？）

　phpはおろかどのようなプログラム言語に関しても無知な私はただコピー＆ペーストとトライ＆エラー。
なんとか目的を達することができた。

参考にしたページは以下
1. NP_LightboxEX (LightBox JS V2とドロップシャドウ付きサムネイル表示機能）
2. NP_LightboxEX.php
3. Lightbox 2
4. Facebox
5. jQuery

プラグイン化の作業

基本的にやったことと言えば、NP_LighboxEXから不要部分を省き、FaceboxやjQueryを利用するために一部書き換えたり、書き加えたりした。
ディレクトリ構造はNP_LighboxEXをそのまま引き継いだ。
「class.Thumbnail_with_Frame.php」は今回使わないので削除。
css、images、js、languageフォルダをfaceboxというフォルダにまとめた。
cssフォルダにはFaceboxを解凍してできる「facebox.css」を置く。
imagesフォルダには同じくFaceboxを解凍してできるgifファイルとpngファイルを置く。
これらがポップアップファイルのフレームになり、Loading中のアニメーションやCLOSEボタンになる。
jsフォルダには「facebox.js」と「jquery.js」を置いた。
「facebox.js」はFaceboxを解凍してできたfaceboxの本体。
「jquery.js」はjQueryにあるファイルのうち「jQuery 1.2.2 (15kb, Minified and Gzipped)」となっているモノをrenameしてある。
langageフォルダはそのままコピー。
ただし、内容は勝手に変更した。

　それぞれの環境に合わせて変更すべきファイルは「facebox.css」、langageフォルダ内とNP_Facebox（勝手に命名）。

「facebox.css」

ポップアップ画像の額縁をつくるイメージファイルのpathを修正する。

#facebox .b { background:url(/nucleus/plugins/facebox/images/b.png); } #facebox .tl { background:url(/nucleus/plugins/facebox/images/tl.png); } #facebox .tr { background:url(/nucleus/plugins/facebox/images/tr.png); } #facebox .bl { background:url(/nucleus/plugins/facebox/images/bl.png); } #facebox .br { background:url(/nucleus/plugins/facebox/images/br.png); } ・・・・・・・以下変更なし

NP_Facebox

NP_Facebox（勝手に命名）は以下の通り。

<?php /* * NP_LightboxEX.php * * tomoaki matsuyama <info@matuto.com> * http://www.nmatuto.com * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * (see nucleus/documentation/index.html#license for more info) * * history * 2007.04.05 0.9.1 Release * 2007.04.19 0.9.2 ... * 2007.04.23 0.9.3 bug fix * 2007.07.02 0.9.4 Thumnail Path change */ if (!function_exists('sql_table')) { function sql_table($name) { return 'nucleus_' . $name; } } # class名やDescriptionを変更 #class NP_LightboxEX extends NucleusPlugin { # function getName() { return 'LightboxEX'; } # function getAuthor() { return 'tomoaki matsuyama'; } # function getURL() { return 'http://www.matuto.com'; } # function getVersion() { return '0.9.4'; } # function getMinNucleusVersion() { return 320; } # function getEventList() { return array( 'PreItem' ); } # function getDescription() { return _LIGHTBOXEX__DESC; } class NP_Facebox extends NucleusPlugin { function getName() { return 'Facebox'; } function getAuthor() { return 'matuto | snak'; } function getURL() { return ''; } function getVersion() { return '0.0.1'; } function getMinNucleusVersion() { return 320; } function getEventList() { return array( 'PreItem' ); } function getDescription() { return _FACEBOX__DESC; } function supportsFeature($what) { switch($what) { case 'SqlTablePrefix': return 1; case 'HelpPage': return 1; default: return 0; } } # BoxSize,FrameSize,DropShadowは不要にて削除 # function install() { # $this->createOption( # 'BoxSize', # _LIGHTBOXEX__BOXSIZE, # 'text', # '150' # ); # $this->createOption( # 'FrameSize', # _LIGHTBOXEX__FRAMESIZE, # 'text', # '10' # ); # $this->createOption( # 'DropShadow', # _LIGHTBOXEX__DROPSHADOW, # 'yesno', # 'yes' # ); # } function init() { global $admin; $language = ereg_replace( '[\\|/]', '', getLanguageName()); if (file_exists($this->getDirectory() . 'language/' . $language.'.php')) { include_once($this->getDirectory() . 'language/' . $language.'.php'); }else { include_once($this->getDirectory() . 'language/' . 'english.php'); } } # 不要にて削除 # function doAction($type) { # global $CONF, $DIR_MEDIA; # # $url = $DIR_MEDIA . requestVar('url'); # $size = $this->getOption('BoxSize'); # $framesize = $this->getOption('FrameSize'); # # if ($this->getOption('DropShadow') == 'yes') { # $dropshadow = 1; # } else { # $dropshadow = 0; # } # # if (is_numeric($framesize)) { # $framesize = (int)$framesize; # } else { # $framesize = 0; # $dropshadow = 0; # } # # include("lightboxex/class.Thumbnail_with_Frame.php"); # $tn_image = new Thumbnail_with_Frame($url, $size, $size, 0, 75, $framesize, $dropshadow, $CONF['PluginURL']); # # $tn_image -> show(); # } function doSkinVar($type, $param1) { switch ($param1) { case 'head' : # 使用するライブラリーやcssファイルに合わせて変更 # $url = $this->getAdminURL() . 'js/prototype.js'; # echo '<script type="text/javascript" src="' . $url .'"></script>'; # # $url = $this->getAdminURL() . 'js/scriptaculous.js?load=effects'; # echo '<script type="text/javascript" src="' . $url .'"></script>'; # # $url = $this->getAdminURL() . 'js/lightbox.js'; # echo '<script type="text/javascript" src="' . $url .'"></script>'; # # $css = $this->getAdminURL() . 'css/lightbox.css'; # echo '<link rel="stylesheet" type="text/css" href="'. $css . '" />'; $url = $this->getAdminURL() . 'js/jquery.js'; echo "<script type=\"text/javascript\" src=\"" . $url ."\"></script>\r"; $css = $this->getAdminURL() . 'css/facebox.css'; echo "<link media=\"screen\" rel=\"stylesheet\" type=\"text/css\" href=\"". $css . "\" />\r"; $url = $this->getAdminURL() . 'js/facebox.js'; echo "<script type=\"text/javascript\" src=\"" . $url ."\"></script>\r"; $onload = "jQuery(document).ready(function(\$) {\$('a[rel*=facebox]').facebox() })"; echo '<script type="text/javascript">'. $onload .'</script>'; break; case 'footer' : break; } } // callback function function makelink_callback($m) { global $CONF, $DIR_MEDIA; $mcnt = count($m); if ($mcnt == 2) { // popup var $mvar = explode('|', $m[1]); if ( strstr($mvar[0], '/') ) { $memberdir = ''; } else { $memberdir = $this->authorid . '/'; } $url = $CONF['MediaURL'] . $memberdir . $mvar[0]; $path = $memberdir . $mvar[0]; $linktext = $mvar[3]; #　不要部分を削除 # $BoxSize = $this->getOption('BoxSize'); # if (!is_int($BoxSize)) $BoxSize = 150; # if ((int)$BoxSize > 200) $BoxSize = 200; #　プラグイン名に合わせて一部変更 # $imgurl = $CONF['ActionURL'] . '?action=plugin&name=LightboxEX&url='.htmlspecialchars($path); $imgurl = $CONF['ActionURL'] . '?action=plugin&name=Facebox&url='.htmlspecialchars($path); $img = "<img src='".$imgurl."' border='0' class='itemimg' />"; # return "<a href='$url' rel='lightbox[grp]' title='".$linktext."'>".$img."</a>"; return "<a href='$url' rel='facebox'>".$img."</a>"; } else { return $m[0]; //invalid match. return as it is } } function event_PreItem($data) { // prepare $tgt = array('/<%popup$(.+?)$%>/', '/<a(?:\s+?)href=([^>]+)>(<img(?:\s+?)src=[^>]+>)/'); // convert $obj = &$data["item"]; $this->authorid = $obj->authorid; $obj->body = preg_replace_callback($tgt, array(&$this, 'makelink_callback'), $obj->body); $obj->more = preg_replace_callback($tgt, array(&$this, 'makelink_callback'), $obj->more); } } ?>

japanese-euc.php

english.phpやjapanese-utf8.phpも同様に「_FACEBOX__DESC」とする。
内容は好きなように書き換えた。

<?php define('_FACEBOX__DESC', '軽快なjQueryを利用し、Lightbox風に角丸で可愛く画像をポップアップしてくれます。<br />' . '<head>タグ内に<%Facebox(head)%>と記載してください。'); ?>

インストール方法

基本的にNP_LighboxEXと同じ。

1. NP_Facebox.phpを、Nucleusのnucleus/pluginsディレクトリにコピー。
2. 同様に、faceboxディレクトリを中のファイルごと、nucleus/pluginsディレクトリにコピー。
3. Nucleusのプラグイン管理画面から、NP_Faceboxプラグインをインストール。
4. skinファイルのhead.inc(あるいはそれに該当するファイル)に、 <%Facebox(head)%>と挿入する。