+と-の虫メガネについて

質問

カテゴリが違う場合は、すいません。javascriptかPHPのどちらかのような気がして

+と-の虫メガネを画像の上でクリックすると縮小した画像が拡大されて表示されますが仕組みや方法について教えてください。

お願いします。

どんな感じにしたいかと言うと、

例
1行目
2行目
3行目
4行目
5行目
6行目
7行目
8行目
と10行目までは文字を書く予定です。
以降に画像を添付したいと思っています。左右、真中、画像の位置はどこでもいいです。

回答No.1

fujillin · ベストアンサー

質問なさっている内容のイメージがよくわからないのでなんとも言えませんが、画像の拡大などはいろいろとライブラリができていますので、手っ取り早くそういうのを利用すると言う方法もあります。

＞縮小した画像が拡大されて表示されますが仕組みや方法
javascriptだと単純に画像のサイズを変えているだけ。部分表示もできるので（clip)部分拡大みたいにすることも可能。
同じ画像を拡大していくと荒くなるので、拡大用に別の画像を用いているものもあるみたい。
phpはサーバ側で動くものなので、ご質問のようなインターフェースだと反応が遅いかも・・・
（↓）の例にあるように、フラッシュでもっと凝った実現をしているものもあります。

javascript関連で、ちょっとぐぐってみたもの。
探せば、他にもたくさん見つかるはずです。

1）FancyZoom（よくあるズーム拡大するもの）
　http://www.cabel.name/2008/02/fancyzoom-10.html

2）Mapbox（マウスホィールで拡大縮小）
　http://wayfarerweb.com/jquery/plugins/mapbox/

3）jQzoom（虫眼鏡的部分拡大）
　http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

4）Cloud Zoom（3と同様だがいろいろバリエーションあり）
　http://www.professorcloud.com/mainsite/cloud-zoom.htm

5）Magic Toolbox（いろいろあり、sharewareかも）
・Magic Zoom（ほぼ4と同じ）
　http://www.magictoolbox.com/magiczoomplus/examples/
・Magic Magnify（フラッシュを併用。まさに虫眼鏡）
　http://www.magictoolbox.com/magicmagnifyplus/examples/
・Magic Touch（フラッシュを併用。+、-でというのに近いかも）
　http://www.magictoolbox.com/magictouch/examples/