livedoor
アフィリエイトは儲かんないってば2008年04月21日12:38
たくさんの画像を効果的に見せたい場合、Javascriptを使用するという手がありますが、なかなか導入が難しかったりします。導入が簡単で、動作が軽快で、なおかつかっこいいJavascriptを探していたら、ありました。今回ご紹介させて頂く「FancyZoom」です。
cabel.name: FancyZoom 1.1
ギャラリー
↑私が作った動作サンプルのサイト
ただ、「FancyZoom」には、いくつか注意点があります。
１．非商用利用は無料だが、商用利用は39ドル。
２．ファイルを置くディレクトリ構造が限定される。
３．IEでの挙動が少し違う。
４．IEでイメージツールバーが出ると拡大画像が縮小される際、チラつく。
ということです。
それぞれ解説させていただきます。
１．非商用利用は無料だが、商用利用は39ドル。
かなり微妙な記述ですが、ライセンスに関しては下記のようになっています。
License
FancyZoom is totally free for your non-commercial website.
In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee. Instantly add nice image zooming to your site. Click here to instantly and securely buy a license.
商用利用の中にはアフィリエイトも含まれそうな気もしますので、無料で使用できるのは、趣味のサイトでイラストを掲示するだけの利用とかに限られそうです。（私の英語の解釈が間違っている可能性はありますので各自ご判断下さい。）
なかなか良い動きをするJavascriptなのでいろんなところで使いたい気もしますが、英語で支払いとかは自信がありませんので、商用での利用は二の足を踏んでしまいますが。ちょっと残念です。
２．ファイルを置くディレクトリ構造が限定される。
ダウンロードしたファイル「FancyZoom 1.1.zip」を解凍すると、「js-global」と「images-global」という2つのフォルダが出てきます。
この2つのフォルダをアップロードするわけですが、http://main.matrix.jp/（フォルダ名「main」）というサブドメインを持っている場合を例に説明させていただきます。
http://main.matrix.jp/zoom/zoom.html
上記アドレスのページに「FancyZoom」を設置する際は、下記のようなディレクトリ構造にします。
注意するべき点は、http://main.matrix.jp/の直下に「js-global」と「images-global」を設置するということです。
これがよくわからずに、設置に手間取りました（笑）。
例えば、http://blog.livedoor.jp/afiliate/という無料ブログに「FancyZoom」を設置したいと思っても、http://blog.livedoor.jp/の直下に「js-global」と「images-global」を置く方法が無いので、設置は無理ということになります。
３．IEでの挙動が少し違う。
IEで「FancyZoom」を見ても、「枠」が表示されません。
拡大画像の左上にあるＸ(バッテン)のマークもFirefoxと比べると、拡大画像の内側に表示されています。
機能的には問題ないのですが、気になる方は気になるかと思います。
これに関しては、Javascript内に下記のように書いてあります。
Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
Javascriptの内容を見てもよくわかりませんでしたが、IEはどうも枠自体を表示しないように、ブラウザで判定されて、条件分岐されているようです。
４．IEでイメージツールバーが出ると拡大画像が縮小される際、チラつく。
イメージツールバーと言うのは↓これです。
拡大画像にコレが表示されると、拡大画像が非表示になる際、画面全体がチラチラとちらついてかなり気になります。
「FancyZoom」を設置するzoom.htmlのheadタグ内に、下記のメタタグを入れましょう。
＜HTMLの場合＞
<meta http-equiv="Imagetoolbar" content="no">
＜XHTMLの場合＞
<meta http-equiv="Imagetoolbar" content="no" />
というわけで設置方法。
cabel.name: FancyZoom 1.1で「FancyZoom 1.1.zip」をダウンロードし、解凍。
「js-global」と「images-global」を自分のサーバーにアップロードします。アップロードするフォルダは前述のディレクトリ構造を参考にされて下さい。
次に、画像を準備。
私の場合、横500px縦400pxの画像（例:20080418.gif）とそのサムネイル画像を準備しました。サムネイル画像（例:20080418s.gif）は横125px縦100pxです。
zoom.htmlをTerapadで作りました。
＜内容＞
<html>
<head>
<meta http-equiv="Imagetoolbar" content="no">
<script src="/js-global/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
</head>
<body onLoad="setupZoom();">
<a href="20080418.gif" title="20080418"><img src="20080418s.gif" width="125" height="100"></a>
</body>
</html>
稼動するための最低限の部分のみを書いたものです。
bodyに、onLoad="setupZoom();が必要です。
ディレクトリ構造は前述の通りです。
aタグにtitle="20080418"を入れると拡大画像のキャプションになります。
画像とHTMLファイルが準備出来たら、前述のディレクトリ構造を参考にアップロードされて下さい。
以上です。興味があられる方はお試しあれ〜。
＜追記＞
Lightbox2も良い感じですよ！
[javascript]Lightbox2を使ってみたよ
この記事へのコメント
|
海藤真奈
2008年04月21日 22:03
|
わーafiliateさんだー
なつかしいです〜 お元気そうですね。よかったです。 びびりなので、このコメントに自分のブログ先リンクしてないですが、 私は相変わらずひっそりと（笑）日記、続けてます。 それにしても、afiliateさんの長文、ほんと個性的ですよね。 またまた笑っちゃいました。 HTMLとかのことは、よくわからないんですけれど…でも これからもぼちぼちと、続けて欲しいです… …勘違いして、下の方の記事に同じコメントを入れてしまいました。 すいません… なんだか以前もこのような事をしたような… 学習してませんねぇ…ﾄﾎﾎ |
K子
2008年04月22日 02:34 |
こんばんは。
イメージツールバーの消し方、参考になりました。 どうにかならないのかな？と常々思っていたので・・・ 私が知らないだけで、常識だったのかしら？ ワードプレスだったら、結構簡単で手軽に導入できる 画像用のプラグインが充実しているみたいですよ。 http://www.huddletogether.com/projects/lightbox2/ このプラグインをよく使用しています。 |
|
afiliate
2008年04月22日 12:51
|
どおも〜海藤真奈さま。私もおなつかしいです。
ご無沙汰しておりました。 何とかひっそりとぼちぼち続けております（笑）。 笑っていただけるのが、一番嬉しいですね。 コメントなのですが、私が変にカスタマイズしてブログをいじっているためか、コメントが調子悪いんです。お気になさらずに〜。重複分は削除させて頂きました。 これからも無理の無いペースでのんびりやっていきますので、お暇な時にいらしてくださいませ♪ |
|
afiliate
2008年04月22日 12:56
|
どおも〜k子さま。
イメージツールバーは私もかねてから邪魔と思っておりましたが、最初は名称がわからないんですよね。ホント邪魔です（笑）。 http://afiliate.livedoor.biz/archives/50933467.html WordPressは最近いじってないのですが、今度いじる時は、プラグインチェックして見ますね。 Lightbox2は早速使ってみました。 http://afiliate.livedoor.biz/archives/51038434.html 食わず嫌いでしたが、なかなか良い感じですね。教えていただき、ありがとうございました♪ |
この記事にコメントする
注：livedoorBlogの仕様により、コメントは400字以内となっております。
コメントが長くなりそうな場合は、
メモ帳にコピペなどされておかれることをお勧めいたします。
