WEB ギャラリーの作り方 ２段階の拡大

質問

ギャラリーサイトを作成しています。

10枚ほどの画像を並べて、
マウスオーバーした時に少し拡大、クリックすると実寸の画像が表示されるようにしたいです。
下記サイトが近いのですが、マウスオーバー時に拡大したいです。

http://tympanus.net/Tutorials/CSS3Lightbox/index.html

参考になるjquaryがあれば教えてください。

よろしくお願いします。

回答No.1

fujillin · ベストアンサー

普通によく使用されている、画像拡大のライブラリを利用してクリックでの拡大をするとして、マウスオーバーでの拡大はCSSでと使い分ければ比較的簡単ではないかと思います。（ライブラリによってはうまくいかないものもあるかも）
まぁ、ついでにスクリプトでやってもいいんですけれどね。

試しにlightboxでやってみましたが、
CSSの指定は、例えば
　#gallery a { display:block; width:70px; height:70px; }
　#gallery a img { width:100%; height:100%; }
　#gallery a:hover { width:150px; height:150px; }
のような感じで。
（直接 img:hover でもいいのですが、リンク要素でないとダメなブラウザもあるので…）

画像拡大表示のライブラリはいっぱいあるので、お好きなものを探してみてください。
＜以下ごく一例です＞
http://jquery.com/demo/thickbox/
http://highslide.com/
http://www.lokeshdhakar.com/projects/lightbox2/
http://www.nickstakenburg.com/projects/lightview/

お礼

ご回答ありがとうございます。

早速やってみました。なんとか出来そうです。

CSSの指定も自分なりに一度チャレンジしてみてダメだったので、
とても助かりました。

ライブラリの参考URLもとても助かります。

もっと勉強してみます。