NP_CustomThumbnailを改造してFancyZoomに対応させてみた
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
という記事があったので、たまこのページというかseeds-network.com全体で対応してみた（もともと全blogで区分けなく使用するようにしてあるので個別に対応させるのが面倒くさい）
サンプルはここ
ここで使っているブログシステムはnucleusというシステムなんだけど、デフォルトのメディア管理システム（イメージ等）はちょっと貧弱で等倍で貼り付ける（埋め込み）か、テキストベースでリンク（ポップアップ）かのどちらかしか選べない、、、選択しは2つでもいいんだけど、埋め込み時には出来ればサムネイルで表示してクリックするとオリジナルを表示するような仕組みにしたかったので、NP_CustomThumbnailというのを入れて貼り付けていました。
NP_CustomThumbnailはイメージをアップロードすると、記事を表示したさいに、動的にイメージのサムネイルを作成して、それを表示。クリックするとjavascriptでウィンドウを新規に表示してその中に、オリジナルを表示する動作を行う。以下がいままでの感じ・・・
この状態でイメージ部分をクリックすると・・・
新規のウィンドウが開いてその中にイメージ表示
で、これをFancyZoomに対応させて以下のようなイメージにしたってわけ
上の二つのイメージをクリックするとすでに、分かると思うんだけど、イメージがスルスルっとアップしてイメージを表示。イメージの下にはイメージの説明が表示されていると思う。
FancyZoomに対応させるには、イメージ部分のHTMLを、
<a href="http://tamako.seeds-network.com?
imagepopup=1/20080208-logo-apple-1.gif&
width=488&height=216&
imagetext=Appli" onclick="window.open(this.href,'image
popup','status=no,toolbar=no,scrollbars=no,
resizable=yes,width=488,height=216');return false;" class="thumbnail">
<img src="http://www.seeds-network.com/media/
thumbnail/1_20080208-logo-apple-1.gif" width="200" height="89" alt="Appli" title="Appli" /></a>
と書き出していたところを、
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
と書き出すようにする
これって、普通にイメージをリンクするということなので、今までjavascriptで書き出していた部分がすっきりするということになる。まあ、だから、FancyZoomの導入は簡単ってことなんだけど、、、
で、NP_CustomThumbnailの修正は下記のようにしてみた。
NP_CustomThumbnailをエディタで開いて、244行目から247行目までをコメントアウト
248行目に以下のように書き足す
$raw_popup_link = $CONF['Self'] . "/media/" . htmlspecialchars ($orig_filename);
$result = "<a href=\"$raw_popup_link\" " . "title=\"". htmlspecialchars ($raw_text) . "\" " . $this->opt_link_attr . ">$result</a>";
やってることは簡単で今までjavascriptでウィンドウを開いていたのを普通にHTMLにリンクをはるようにしただけ、、、またtitleタグにイメージの説明が入るように書き足す。
以前のNP_CustomThumbnail.php.orgなどとリネームして、新規に書き直したNP_CustomThumbnailをアップ。NP_CustomThumbnailはオプションの設定以外はDBを利用していないので、そのままアップするだけでOK。
あとは、cabel.name: FancyZoom 1.1からjavascriptのソースをダウンロード、解凍してサイトにアップロード。イメージを拡大した時の、×マークとイメージの影の部分のイメージ類が入っている、images-globalはホームの直下にアップロード。
nucleusのスキンのhead部分に、以下を追加
<script type="text/javascript" src="./hoge/FancyZoom.js"></script> <script type="text/javascript" src="./hoge/FancyZoomHTML.js"></script>
またbody部分に、以下を追加して保存
<body onload="setupZoom()">
最後にページをリロードして再表示させたあと、イメージをクリックしてみると・・・
ズーンとzoomして表示されるってわけ、、、
NP_CustomThumbnailがサムネイルを作ってくれてオリジナルにリンクをはき出してくれるので、かなりGJです。同じようなプラグインはいっぱいあるので、はき出す部分だけを上記のようにすれば簡単に導入できますね。
一つ気がかりなのは、firefoxだとわりと素早く動作するのですが、IE6 or IE7だとちょっともっさりしていることかな。safariはちょっと試せないので、分からないんだけど、、、
あと、サイドのyoutubeの部分とちょっと動作が違うので、その部分を共通化させたいな～と思っています。
なお、修正は自己責任でお願いしますね。
追記：ホームページのリニューアルにつき、たまログのページではFancyZoomの使用は停止しました。でもシーズの方ではまだ生きているのでそっちで効果をみてね
