jQueryで画像のズームイン/アウトをしてみた

jQueryベースの画像ズームイン/アウトのプラグインなんていくらでもあるけれど、自分の思うように動くものやしっくりくるものがなかったので作ってみました。
何事も挑戦あるのみ。

画像を大サイズと小サイズ（サムネイル用）の2枚用意します。
※widthとheightを2倍に設定しているため、大サイズは小サイズの丁度2倍の大きさにする必要があります。 class名を"zoom"と設定したサムネイルをクリックすると起動します。
サムネイルの上に大サイズの画像をサムネイルと同じサイズ指定で表示し、アニメーションさせながら元のサイズまで戻す、という動きをします。
大きくなった画像をクリックすると逆戻りをした後削除されます。

ズームのサンプル

1枚の画像がそのまま大きくなっているように見えるけれど、実際は2枚使っているという。
今回は自サイト用に作っているので、大サイズ画像の縦横は800*600に固定しています。
サムネイルがすごく小さいものならば1枚の画像で大小を兼ねてもいいのかもですが、うちの場合はサムネイルも400*300のサイズにしているので少々見栄えを考えて各サイズの画像を用意しています。

jQuery.jsとinterface.jsが必要です。

全然良いものとは思えないけれど、自分のやりたい動作を初心者でもぱっと書けてしまうのがjQueryの良いところ。

thickboxやlightboxなど素晴らしいプラグインは色々ありますが、どうもいらない機能が多いし、CSS周りに不備が多くて、面倒な調整をするくらいなら自分で作ってしまったほうがしっくりくるものですね。

コードを載せておきます。

Javascript

1. $('img[@class="zoom"]').hover(function(){
2. $(this).css('cursor','pointer');
3. },function(){
4. $(this).css('cursor','inherit');
5. });
6. $('img[@class="zoom"]').click(function(){
7. var i = this;
8. var iWid = i.width;
9. var iHei = i.height;
10. var ext = this.src.substring(this.src.length-4,this.src.length);
11. var zSrc = this.src.substring(0,this.src.length-6)+ext;
12. var zoomi = new Image();
13. $(i).before(zoomi);
14. zoomi.src = zSrc; zoomi.width = iWid; zoomi.height = iHei; zoomi.className = 'zoomi';
15. var lWid = iWid * 2;
16. var lHei = iHei * 2;
17. $('.zoomi').animate({ width: lWid,height: lHei}, 500 );
18. zoomi.className = 'zoomii';
19. $('img[@class="zoomii"]').click(function(){
20. var i = this;
21. $(i).animate({ width: iWid,height: iHei}, 500 );
22. var zoomOff = function(){ $(i).remove();};
23. setTimeout(zoomOff,500);
24. });
25. });

HTML

1. <p class="img"><img src="hoge.jpg" width="400" height="300" alt="hoge" class="zoom" /></p>

CSS

1. .img img.zoomi,
2. .img img.zoomii {
3. position: absolute;
4. z-index: 99;
5. cursor: pointer;
6. }