自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【jQuery】いろんなズーム機能を実装、xZoomの使い方!!の解説になります!こんな方に読んでほしいjQueryを学び始めた方へプラグインのxZoomを使って「画像をズーム(拡大)」をしたい方向け今回はxZoomについて解説しております。今回は、「xZoom」についての解説になります。「xZoom」になりますが、今でも簡単で使いやすいプラグインになっております。イメージ図は上記のようになります。今回は、メイン画像にマウスオーバーをすると、その一部分がズーム(拡大)されます。options」について解説します。[記事の内容]xZoomについて必要なファイルについて記述場所についてズーム機能の設定についてズーム機能の設定についてまとめxZoomについてxZoomとは、「画像をズーム(拡大)」のことを示します。Pop-up」の5つが用意されております。options」について解説します。jQueryが苦手な方でも問題ありません。Plugin」をダウンロードしましょう。ZIP」ボタンをクリック3必要なファイルについてダウンロード後に必要なファイルについて解説していきます。ファイル名の「xZoom-master」をご確認ください。「setup.js」の3点を使用します。ポイント!「setup.js」には、上記で説明した、5つのタイプが記述されています。一部を抜粋して記述しても問題ありません。type="text/javascript"></script>「xzoom.min.js」と繋げて記述するのが良いでしょう。ファイルの階層は、ご自身のフォルダに合わせてください。次に、jquery本体のプラグイン設置します。今回は2つ目のパターンを採用して解説します。2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。どちらでも問題ありません。type="text/javascript"></script>必ず、jquery本体のプラグイン上、xzoomを下に設置しましょう。jqueryをダウンロードしたい方は、こちらのリンクから。記述場所について基本的にはbody内に指定するようにしましょう。基本構造の書き方は以下のようになります。コンテンツが入ります。type="text/javascript"></script></body></html>ズーム機能の設定について次に、ズーム機能の設定について解説します。ズーム機能の設定についてデモサイトはコチラから。基本構造の書き方は以下のようになります。必要な箇所のみ変更してください。--*/setup.jsを参照してくださいメイン画像の.xzoom3は、ズーム機能のタイプ3番目の意味になります。「src=”〇〇”」と、更に「xoriginal=”〇〇”」2つ指定してください。サムネイル画像は、.xzoom-thumbsで囲みます。1枚目のサムネイル画像は「href=”〇〇”、src=”〇〇”、xpreview=”〇〇”」3つ指定してください。2枚目以降は「href=”〇〇”、src=”〇〇”」2つ指定してください。まとめ今回はこれで以上です。POINTxZoomとは、画像をズーム(拡大)のことを示します。こちらにデモサイトを用意しました。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。