【jQuery】jQueryで画像ズーム機能を実装する方法について、jQueryのバージョンが3.x.xの注意点

1月 3, 2018

前回の記事にて、
「SergeLand Image Zoomer v3.0」さんの「zoomsl-3.0.js」を使い、
画像をズームする方法を記事にしました。
ですが、使用しているjQueryのバージョンによっては動かないことが判明しました。

翻訳する前にこちらを解決致します。

問題内容

画面を開いて画像にカーソルを当てても、画像が拡大されない。

原因

chromeの開発者コンソールを開いて、javascriptエラーを見つけました。
※Macの場合：alt(option)+command+i
※Windowsの場合：F12キー）

エラーメッセージは以下

jquery-3.2.1.min.js:4 Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery-3.2.1.min.js:4)
at zoomsl-3.0.js:20

indexOfの関数が存在しないというメッセージっぽいですが、ひとまずgoogle先生に
「jQuery a.indexOf is not a function」
で確認。

そうしましたら、ヒットしました。

どうやら「zoomsl-3.0.js」内で使用している「.load」関数がjQuery3.x.xでは廃止されたのが原因でした。

バージョンアップ内容でわかりやすかった記事も見つけたので
載せておきます。

ナンテコッタイ

解決方法(2018/01/03時点)

解決案

・使用するjQueryのバージョンを「2.x.x」か「1.x.x」にする

※zoomsl-3.0.jsの中身で使用している「.load関数」を「.on関数（.on(“load”,function(){〜）」に置き換えるとも考えましたが、規約周りでまだ不明なところがあるのでやらないほうが良いと思います。どうしてもjQueryの3.x.x系を使いたいなら、自力で書くという手段というのが良いです。

まとめ

もしかしたらzoomsl-3.0.jsの作者が「3.x.x」に対応したプラグインを開発してくれているかもしれませんが
現在の最新のバージョンは対応していないですね。
ズーム目的を達成するには、大人しくjQueryのバージョンを下げるか
別のズーム用プラグインを使うのが良いのかもしれませんね。

codeZineさん、soarhorseさんありがとうございます！！

今回はこれまで！
хорошо！