ギャラリーサイトを作成しています。
10枚ほどの画像を並べて、
マウスオーバーした時に少し拡大、クリックすると実寸の画像が表示されるようにしたいです。
下記サイトが近いのですが、マウスオーバー時に拡大したいです。
http://tympanus.net/Tutorials/CSS3Lightbox/index.html
参考になるjquaryがあれば教えてください。
よろしくお願いします。
投稿日時 - 2012-02-16 18:14:15
普通によく使用されている、画像拡大のライブラリを利用してクリックでの拡大をするとして、マウスオーバーでの拡大は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/
投稿日時 - 2012-02-16 20:10:30
お礼
ご回答ありがとうございます。
早速やってみました。なんとか出来そうです。
CSSの指定も自分なりに一度チャレンジしてみてダメだったので、
とても助かりました。
ライブラリの参考URLもとても助かります。
もっと勉強してみます。
投稿日時 - 2012-02-17 07:32:11
1人が「このQ&Aが役に立った」と投票しています
OKWaveのオススメ
おすすめリンク
