cloud-zoomを導入してみる

cloud-zoomという虫メガネのような効果が楽しめるJavaScriptを発見したのでサイトに実装しようと試みる。

導入の仕方をサイトで確認してみたらjqueryを利用している様子。このブログには既にLightbox 2を実装しているので・・・直接実装すると(JavaScriptの中で使用している変数がぶつかるのでしょうか?)いろいろ、動作の挙動が怪しくなる。

そこで、ファイルアップロードを使用してcloud-zoomを記述しているhtmlファイルをアップして、ブログにはリンクを貼り、別窓での表示にして・・・なんとか導入の体裁を整えてみる。多少はスマートな感じになったのではないかな?

cloud-zoomのサイトの右サイドにある FREE Download v1.0.2 をクリックしてダウンロードしたフォルダにはjsファイルが2つ、cssファイルが1つあるのですが導入サンプルのhtmlにはcloud-zoom.1.0.2.jscloud-zoom.cssしか使用されていない。

そのかわりにjquery.min.jsが使用されているので、jquery.min.jsをダウンロードしてそれぞれファイルマネジャーでアップする。

この時「"." ドット(ピリオド?)」がいっぱいあるとアップできないのでファイル名をそれぞれcloud-zoom102.js、jquerymin.jsに変更した。cssファイルはそのままcloud-zoom.cssで問題無し。

下記の様な記述でcloud-zoomは無事に発動。

<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquerymin.js"></script>

<script type="text/JavaScript" src="cloud-zoom102.js"></script>

効果がありそうな場面で使用してみたいと思います。


サボテンの花





画像をクリックすると別ウィンドウで虫メガネの様に拡大できます。




コメント

非公開コメント

トラックバック

http://tethering.blog84.fc2.com/tb.php/34-75f53cae