自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【jQuery】ズームイン、アウト画像拡大を実装、zoomerangの使い方!!の解説になります!こんな方に読んでほしいjQueryを学び始めた方へプラグインのzoomerangを使って「ズームイン、アウト画像拡大」をしたい方向け今回はzoomerangについて解説しております。今回は、「zoomerang」についての解説になります。「zoomerang」になりますが、今でも簡単で使いやすいプラグインになっております。イメージ図は上記のようになります。画像をクリックした際に、画像が拡大され、ズームイン・ズームアウトの動きをします。オプションでは、拡大した際の背景色、透明度など指定も可能になります。[記事の内容]zoomerangについて必要なファイルについて記述場所について「画像拡大」の設定について「画像拡大」の設定についてオプションについてまとめzoomerangについてzoomerangとは、「ズームイン、アウト画像拡大」のことを示します。jQueryが苦手な方でも問題ありません。下記のサイトから「zoomerang」をダウンロードしましょう。ZIP」ボタンをクリック3必要なファイルについてダウンロード後に必要なファイルについて解説していきます。ファイル名の「zoomerang-master」をご確認ください。「zoomerang.js」の1点を使用します。type="text/javascript"></script>また、「zoomerang.js」を使用する際には、zoomerangを使用する宣言をしなければなりません。以下のコードを合わせて指定しましょう。Zoomerang.listen('〇〇')</script>「zoomerang.js」と繋げて記述するのが良いでしょう。ファイルの階層は、ご自身のフォルダに合わせてください。記述場所について基本的にはbody内に指定するようにしましょう。基本構造の書き方は以下のようになります。コンテンツが入ります。Zoomerang.listen('〇〇')</script></body></html>「画像拡大」の設定について次に、「画像拡大」の設定について解説します。「画像拡大」の設定についてデモサイトはコチラから。基本構造の書き方は以下のようになります。pointer;}Zoomerang.listen('.zoom')基本的にはシンプルな指定になります。class="zoom"を指定し、Zoomerang.listen('.zoom')と同じクラス名、またはid名を指定します。オプションについて書き方は以下のようになります。.85}).listen('.zoom')指定できる値maxHeight画像を拡大した際の高さになります。デフォルト値は「300」になります。maxWidth画像を拡大した際の横幅を指定します。デフォルト値は「300」になります。bgColor画像を拡大した際の背景色を指定します。デフォルト値は「#fff(白色)」になります。bgOpacity画像を拡大した際の透明度を指定します。デフォルト値は「1」になります。こちらのサイトで他にも解説しております。まとめ今回はこれで以上です。POINTzoomerangとは、ズームイン、アウト画像拡大のことを示します。必要なファイルはzoomerang.jsの1点になります。こちらにデモサイトを用意しました。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。