Zoommy スタイリッシュイメージ拡大スクリプト

Posted by Yoshimasa Niwa on 02/05, 2009

本日、Zoommyをリリースします!

Zoommyはイメージ拡大の為のJavaScriptツール。これは既にこのウェブサイトで利用しているものと同じもので、Zoommyを組み込む事で、普通の画像とリンクタグを簡単に、ファッショナブルでスタイリッシュなズームインタフェース(よくウェブで見るアレです)を備える事ができます!

ZoommyはSafari, Firefox, IE7とIE6をMacOS X、およびWindowsで動作確認しています。 ZoommyはApple webpage、およびFancyZoomを参考に作られました。 Lightbox.jsの代わりとして使うことができます。

デモ

Zoommyは次のHTMLを自動的にZoomminizeします!

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

さらに、Zoommyは複数の画像をつなげてスライドショーギャラリーを作ることもできます!

<a href="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f.jpg" rel="zoommy['mySlideShow']" title="Montmartre, Paris, France">
  <img src="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2411/2458159794_84884f683b.jpg" rel="zoommy['mySlideShow']" title="Raffles Hotel, Singapore">
  <img src="http://farm3.static.flickr.com/2411/2458159794_84884f683b_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2106/2483739956_89be523894.jpg" rel="zoommy['mySlideShow']" title="Karuizawa, Nagano, Japan">
  <img src="http://farm3.static.flickr.com/2106/2483739956_89be523894_s.jpg" />
</a>

ダウンロード

zoommy-0.1.0.zip (95Kbyte)

Zoommyを使ってみる

依存するライブラリをウェブサイトにコピーします

ZoommyはPrototype.jsバージョン1.6.xとscript.aculo.usバージョン1.8.xに依存しています。もしすでにウェブサイトがこれらのライブラリを使っている場合、たとえば、Ruby on Railsのプロジェクトなどではこれらのファイルをコピーする必要はありません。

Zoommyは現状、Prototype.jsバージョン1.5.xには対応していません。事前にPrototype.jsのバージョンを確認してください。

javascripts/prototype.js
javascripts/effects.js
次のファイルをウェブサイトにコピーします
images/zoommy
javascripts/zoommy.js

なお、zoommy.jsはコンパクト化済みのもので、zoommy_pack.jsはより圧縮されたもの、zoommy_src.jsはコンパクト化するまえのものです。用途の応じて使い分けてください。

ウェブサイトのページのheadタグに以下のコードを追加します。

すでにprototype.jsとeffects.jsへのタグがある場合はこれらを追加する必要はありません。

    <head>
    ....
    <script type="text/javascript" src="javascripts/prototype.js"></script>
    <script type="text/javascript" src="javascripts/effects.js"></script>
    <script type="text/javascript" src="javascripts/zoommy.js"></script>
    ....

追加の設定コードを記述

もし上記手順2.でコピーした画像を違う場所にしたい場合は、各ページのheadタグに以下のコードを追加します。ここでのimagePathはそのウェブページからの相対パスかサイト全体の絶対パスである必要があります。

    <head>
    ....
    <script type="text/javascript">
    zoommy_config = {imagePath: "relative/or/site/wide/absolute/path/to/zoommy/image/from/html"};
    </script>
    ....

これで完了です。ウェブサイトを表示してみましょう!

カスタマイズ

タイトルを表示する

画像をズーム表示した際に、タイトルを表示することができます。title=”(画像のタイトル)”をリンクタグに追加してください。

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg" title="Blue sky and Sunshine!!">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

スライドショーギャラリーを作成する

rel=”zoommy[’(スライドショーの識別子)’]”をリンクタグに追加することで、Zoommyは同じ識別子のリンクをスライドショーギャラリーにして表示します。

<a href="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2411/2458159794_84884f683b.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2411/2458159794_84884f683b_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2106/2483739956_89be523894.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2106/2483739956_89be523894_s.jpg" />
</a>

Zoommyの対象から除外する

もし画像へのリンクをZoommyの対象から除外する場合は、rel=”nozoommy”をリンクタグに追加してください。

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg" target="_blank" rel="nozoommy">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

Zoommyのバッジを表示しない

標準ではZoommyは対象のリンクないのサムネイルにZoommyバッジを左上に表示します。その必要がない場合は、noBadge: trueというオプションをheadタグの設定コードに加えてください。

<head>
....
<script type="text/javascript">
zoommy_config = {
    noBadge: true
};
</script>
....

Z-Indexを調整する

もしZoommyをほかのかっこいいスクリプトやライブラリと同時に使う場合、baseZIndexオプションを設定コードに追加して、Z-Indexの順番を明示する必要があるでしょう。標準では、Zoommyは900以降を使います。

<head>
....
<script type="text/javascript">
zoommy_config = {baseZIndex: 10000};
</script>
....

FAQ

Q. いくつかの画像へのリンクタグがZoommyの対象になりません。なぜですか?

A. Zoommyは”.png”, “.gif”, “.jpg”または”.jpeg”で終わるhref属性か、”zoommy”で始まるrel属性を持つリンクタグを対象にします。つまり、もしリンクタグのhref属性がこれらの拡張子で終わらない場合(画像をCGIなどが生成する場合など)は、rel=”zoommy”を書き加える必要があるでしょう。
```
  <a href="/path/to/image?var=value" rel="zoommy">
    <img src="/path/to/thumbnail" />
  </a>
```

更新履歴

1.0.1
- 最初のリリース

ご支援のお願い

もしこのZoommyを気に入って頂けましたら、お気軽に以下のフォームからPayPalを通じてご支援いただけると幸いです。

Zoommyを支援する

皆様のご支援に感謝いたします。

ソースコード

このプロジェクトはオープンソースプロジェクトです。すべてのソースコードはgithubのレポジトリから取得できます。

ライセンス

ZoommyはMIT Licenseで公開しています。

yoshimasa niwa