SHU BLOG

BLOG NEWS ブログ

TITLE

【jQuery】画像ズーム機能を実装、Simple Image Zoomerの使い方!!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【jQuery】画像ズーム機能を実装、Simple Image Zoomerの使い方!!の解説になります!

こんな方に読んでほしい

  • jQueryを学び始めた方へ
  • プラグインのSimple Image Zoomerを使って「画像ズーム機能」を実装したい方向け
  • 今回はSimple Image Zoomerについて解説しております。

今回は、Simple Image Zoomerについての解説になります。
Simple Image Zoomer」になりますが、今でも簡単で使いやすいプラグインになっております。
公式サイトのデモはこちらになります。

イメージ図は上記のようになります。
「Simple Image Zoomer jQuery Plugin」とは、「画像ズーム機能」になります。
ズームバーが設置され、左右に移動させることで、拡大・縮小が可能になります。
設定もとても簡単で便利なプラグインの一つになっております。

Simple Image Zoomerについて

Simple Image Zoomerについて

Simple Image Zoomerとは、「画像ズーム機能」の実装のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「Simple Image Zoomer」をダウンロードしましょう。

Simple Image Zoomerにアクセス
1https://github.com/CodeHimBlog/jquery-simple-image-zoomer
「Code」ボタンをクリック
2
「Download ZIP」ボタンをクリック
3

必要なファイルについて

ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「jquery-simple-image-zoomer-master」をご確認ください。

cssファイル
1「css」 > 「simple-zoomer.css
jsファイル
2「js」 > 「jquery.simple.zoomer.js」の2点を使用します。
<!--css-->
<link rel="stylesheet" href="css/simple-zoomer.css">
<!--js-->
<script src="js/jquery.simple.zoomer.js" type="text/javascript"></script>

また、「simple.zoomer」を使用する際には、simple.zoomerを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--css-->
<link rel="stylesheet" href="css/simple-zoomer.css">
<!--js-->
<script src="js/jquery.simple.zoomer.js" type="text/javascript"></script>
<script>
$(function(){
 $(".myimage").zoomer();
}); 
</script>

「jquery.simple.zoomer.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

次に、jquery本体のプラグイン設置します。
今回は2つ目のパターンを採用して解説します。

1つ目は、ファイルをダウンロードして使用するパターン、
2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.simple.zoomer.js" type="text/javascript"></script>
<script>
$(function(){
 $(".myimage").zoomer();
}); 
</script>

必ず、jquery本体のプラグイン上、simple.zoomerを下に設置しましょう。
jqueryをダウンロードしたい方は、こちらのリンクから。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】画像ズーム機能を実装...</title>
<!--css-->
<link rel="stylesheet" href="css/simple-zoomer.css">
</head>
<body>

 コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.simple.zoomer.js" type="text/javascript"></script>
<script>
$(function(){
 $(".myimage").zoomer();
}); 
</script>
</body>
</html>

「画像拡大・縮小」の設定について

次に、「画像拡大・縮小」の設定について解説します。

「画像拡大・縮小」の設定について

デモサイトはコチラから。

基本構造の書き方は以下のようになります。

「画像拡大・縮小」

<img class="myimage" src="images/page/top/sample.jpg" alt=""/>
/*--CSSは基本自由です。--*/
$(function(){
 $(".myimage").zoomer();
});

HTMLのimgタグに、クラス名myimageを指定するようにしましょう。
CSSは基本的に何も指定しません。

まとめ

今回はこれで以上です。

POINT
  • Simple Image Zoomerとは、「画像ズーム機能」の実装のことを示します。
  • 必要なファイルはsimple-zoomer.cssjquery.simple.zoomer.jsの2点になります。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top