[Jquery Image Zoom]画像をグリグリっとマウスオーバーで拡大するjQueryプラグインの使い方
前々回に紹介した[jQuery]ECサイトとかであるグリグリってマウスオーバーすると画像が大きくなるやつ!からもうちょっと良いのがないか探してみたのですが、もちょっと良さげなプラグインがあったので、紹介します!
それがこちらの
前回紹介したプラグインに比べると色々と変わったオプションがちょー簡単に出来ちゃうのだ!うーん開発者の方ありがとう!!
使い方はちょー簡単。
プログラミングやWordPressを習得するのに一番近道な方法とは?
①公式サイトからプラグインをダウンロード
②ダウンロードしたファイルを解凍して、本体jsファイルを任意のディレクトリに設置
③下記のようにID指定してドーーーーん!
1 | <img id="zoom_01" src='images/small/s.jpg' data-zoom-image="images/large/l.jpg"/> |
※s.jpgは小さい画像。l.jpgは大きめの画像。
1 2 3 4 5 6 7 8 | <!-- jquery 本体--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- image zoom 本体--> <script type="text/javascript" src="js/jquery.elevateZoom-3.0.3.min.js"></script> <!-- 処理記入 --> <script type="text/javascript"> $("#zoom_01").elevateZoom(); </script> |
こんだけ。かんたん!
デモページもあるよー。
はい、デモページの画像は完全なる個人的な趣味なのであしからず。
ではでは、皆さんも是非使って楽しんで見てくださいね!