- 2009年3月12日 16:15
- カスタマイズ
↓導入後画像。↓クリックするとズームアップします。
写真はブルーにライトアップされたエッフェル塔が毎時ちょうどに10分間だけ点滅してる時の様子。
写真じゃわかりにくいけど、キラキラ可愛かったよ。
普段はオレンジ色にライトアップされてるエッフェル塔。EUの議長国となったのを記念して、期間限定で6月末から2ヶ月ぐらいブルーと聞いていたのですが、クリスマス時期が近づいてもまだブルーでした。結局いつまでだったのかなぁ？
設置は簡単で、公式サイトからファイルをダウンロードして、自分のサイトへアップロードしたら<head>セクションにスクリプトを記述し、<body>タグにonload=”setupZoom()”をを加えるだけです。
あとは、自動にページ内で画像<a href="元画像.jpg"><img src="縮小（サムネイル）画像.jpg></a>となっているものを検出してズームアップを適用してくれます。 勝手にやってくれるってのがいいよね。
簡単～～！と思ったのですが、私の場合クローズする画像までのパスが間違ってて表示されなかったので、FancyZoom.jsの以下の部分のパスを書き換えました。
面倒くさかったので、絶対パスに・・・（笑） こんな感じ↓
var zoomImagesURI = 'http://workie2.com/hogehoge/images-global/zoom/';
ちなみに、画像の下に説明文をつけるには><a>タグに「title="説明文"」を、スクリプトを使用しない場合には「rel="nozoom"」を記述すると適用されるようです。
