【jQuery】jQueryで画像ズーム機能を実装する方法（wordpress対応）
Amazonとかでよく見かける
「画像にマウスカーソルを当てると当てた一帯が拡大・ズームする」
というのをjQueryで実装したかったので、何かいいプラグインを探していました。
そうしたら
ありました。知り合いに教えていただいたロシア語のサイトです。
上記jQueryのプラグインを使えばAmazonと同じような、画像拡大(ズーム)機能を実装できるみたいです。
今回は導入方法を記事にしたいと思います。
通常でjQueryに埋め込む方法とwordpressで使う方法も記載します。
尚、今回は最低限の設定です。
次の記事でAPI仕様の日本語訳を簡単に作ろうかなと思います。
※2018/01/04 解析結果の記事を作成しました。
ページはこちらから
ちなみにこんな感じになります。（スマホで見ている方はタップをしてみて下さい。）
(スクロールホイールで画像の拡大率も変更可能)
※2018/01/03 追記
知り合いの方より『HTML5の場合はscriptタグに「type=”text/javascript”」は
いらないです。』とご指摘をいただきました。ありがとうございます！
導入方法
ダウンロード
こちらから「Download zooms-3.0.js」をクリックして「js」ファイルをダウンロードする。
jsファイルを適切なフォルダに配置する
・wordpressの場合
jsファイルを配置しているフォルダにアップロードしてください。
※大体は「wp-content/themes/使用しているテーマのフォルダ/js」にあるはずです。
※もしもなかったら「wp-content」フォルダの中に「js」フォルダを探してみてください。
jsファイルの読み込み
・HTMLに直接タグを入れる場合
<head>〜<head>に以下の内容を追記する
<script type="text/javascript" src="「jsファイルが配置しているパス」/zoomsl-3.0.js"></script>・worpressの場合
以下の内容を「function.php」に埋め込む
function zoomscript() {
wp_enqueue_script( 'zoomsl-3.0', get_template_directory_uri() . '/js/zoomsl-3.0.js', array(), '20180102', true );
}
add_action( 'wp_enqueue_scripts', 'zoomscript' );jQuery処理の埋め込み
・HTMLに直接埋め込む場合
以下の内容を<head>〜</head>タグ内に埋め込む。
※「zoomimg」で指定している箇所は、拡大したいimgタグのidを指定すること
<script type="text/javascript">
$(function(){
$("#zoomimg").imagezoomsl({
zoomrange: [1, 5], // 拡大率(マウスホイールで拡大・縮小が可能。設定値：[最少,最大])
zoomstart:2, // デフォルトの拡大率
magnifierpos: "left", // 元画像の位置(コンテナの位置)
innerzoom: false // true:画像上で拡大、false:画像横で拡大
});
});
</script>・wordpressの場合
管理メニューの「外観」→「テーマの編集」を選択。
luxech.jsの項目が存在するので編集ページを開く
一番下に以下のコードを埋め込む
※「zoomimg」で指定している箇所は、拡大したいimgタグのidを指定すること
jQuery(function($){
$("#zoomimg").imagezoomsl({
zoomrange: [1, 5], // 拡大率(マウスホイールで拡大・縮小が可能。設定値：[最少,最大])
zoomstart:2, // デフォルトの拡大率
magnifierpos: "left",
innerzoom: false // true:画像上で拡大、false:画像横で拡大
});
});
※はじめに指定した「jQuery〜」の部分について
※wordpressではプラグインの関係上、デフォルトで「$」が使えない。
※そのため「function」の引数に「$」設定することにより、
※function内で$マークが使えるようになる。。。らしい。
※スコープがfunction内だけなので他プラグインには影響しないはず。
imgタグにidを指定する
<img src="画像のパス" data-large="画像のパス" id="zoomimg">※data-large属性で指定している画像が拡大化される。属性がない場合はデフォルトでsrc属性で指定した画像が拡大化
これだけで基本的な動作は動きます。
まとめ
実際に書いて感じたのは、そんなに書く量が多くないというところですね。
しかも書くことが決まっているので、ほとんどコピペでいけるのではないかなと。
もう少し複雑なことをやる場合は、APIの仕様をもっと知る必要があるのかなと思いました。
次記事のためにロシア語翻訳頑張ります。
ただ翻訳するだけじゃなくて、機能としてどういう動きになるかも調査します。
それでは今回はここまで！！
хорошо！！！！