jquery.imagefit.jsで謎のTypeError

###前提・実現したいこと
サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFitを使って、正方形のボックスにサムネイルをフィットさせて表示したい

###発生している問題・エラーメッセージ

TypeError: opts.onStart is not a function. (In 'opts.onStart($i, html.data('main'), img)', 'opts.onStart' is null)

公式のマニュアル通りに設置しているつもりなのですが、何をしても上記のエラーが出て正しく表示できません。

###該当のソースコード

HTML
1<div><a href="images/01.jpg"><img src="images/01.jpg" alt=""></a></div>
2<div><a href="images/02.jpg"><img src="images/02.jpg" alt=""></a></div>
3<div><a href="images/03.jpg"><img src="images/03.jpg" alt=""></a></div>
4<div><a href="images/04.jpg"><img src="images/04.jpg" alt=""></a></div>
5<div><a href="images/05.jpg"><img src="images/05.jpg" alt=""></a></div>
6<div><a href="images/06.jpg"><img src="images/06.jpg" alt=""></a></div>

CSS
1html, body {
2	width: 100%;
3	height: 100%;
4	padding: 0;
5	margin: 0;
6}
7div {
8	border: 1px solid #666;
9	width: 200px;
10	height: 200px;
11	padding: 0;
12	margin: 10px;
13	display: inline-block;
14	vertical-align: top; 
15}

javascript
1<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
2<script type="text/javascript" src="/assets/js/jquery.imagefit.js"></script>
3<script>
4  $(window).load(function() {
5     $('div').imagefit();
6  });
7</script>

###試したこと
該当プラグインのJSのみにして他のスクリプトからの干渉の可能性を排除したり、
HTML・CSSを公式デモに近づけたりして試してみましたがダメなので、
公式デモのソースを丸パクリしてローカルでテストした所（※上記ソース）、
それでもエラーが出るので何が悪いのかさっぱり分からなくなりました。

###補足情報(言語/FW/ツール等のバージョンなど)
MacOSX Chrome で確認中
▼公式デモ
http://periplox.github.io/jquery.imagefit/

公式デモでは問題ないのに、コピーしてきて手元で表示させると謎のエラーが出るという状況の原因が分かると良いのですが、何か手がかりはございませんでしょうか？

よろしくお願い申し上げます。

行動規範の内容に同意します

回答1件

ベストアンサー

TypeError: opts.onStart is not a function TypeError: m.onStart is not a function とか出ますね。

JavaScript
1$( function() {
2	$( 'div' ).imagefit( { onStart: function(){} } );
3} );
4```**動くサンプル：**[https://jsfiddle.net/tpx55o9o/](https://jsfiddle.net/tpx55o9o/)
5
6`onLoad` `onError` `onStart` すべてが `null` になっているので、もしかしたらこれにも空functionを入れる必要があるかもしれません。
7
8（というか aKusanoさんならライブラリを使わなくてもCSSで処理できそう）
9
10---
11
12**追記：**
13
14CSSで作ってみた。
15
16```CSS
17div > a {
18	border: 1px solid #666;
19	width: 200px;
20	height: 200px;
21	overflow: hidden;
22	padding: 0;
23	position: relative;
24	margin: 10px;
25	display: inline-block;
26	vertical-align: top; 
27}
28div > a > img {
29	left: 50%;
30	min-height: 200px;
31	min-width: 200px;
32	position: absolute;
33	top: 50%;
34	transform: translate(-50%, -50%);
35}
36```**動くサンプル：**[https://jsfiddle.net/tpx55o9o/1/](https://jsfiddle.net/tpx55o9o/1/)

投稿2016/10/17 15:37

編集2016/10/17 16:06

kei344

総合スコア69398

aKusano

2016/10/17 15:46

縦長・横長どちらかだけなら余裕でCSSで処理できるんですけど、どっちが来るか分からない場合はそれ判定してサイズ調べて1/2して……とか面倒なので、プラグインでサクッとできたら楽だなーと思ったのですがとんだトラップが仕掛けられてました…orz onLoad, onError, onStartの3つは、プラグイン本体の方のデフォルト値としてnullが設定されてるんですよね。。。それでエラーとか言われても(；´Д｀) これはプラグインのバグ、、、でしょうかねぇ…

nnssn

2016/10/17 15:55 編集

なんでデモのほうはエラー出ないんだろうと思ったら、デモのほうはバージョン表記一緒なのにonStart実装前のコードみたいですね。 github v1.0.0　onStartあり https://raw.githubusercontent.com/periplox/jquery.imagefit/master/jquery.imagefit.js demo v1.0.0　onStartなし http://periplox.github.io/jquery.imagefit/js/jquery.imagefit.js

aKusano

2016/10/17 15:55

おふぅ………！！！なんと、、そういう落ちですか……orz ちゃんとメンテされてない野良プラグインみたいな感じがするので、仕事では使わないほうが良さそうな気がしてきました。ありがとうございます。。。

aKusano

2016/10/17 16:34

＞kei344さんあれ！縦横どっちでもできましたっけ？片方しかできないとどこかでインプットされてました。参考にさせていただきます。ありがとうございます！

aKusano

2016/10/17 17:01

片方しかできないというのはCSSで「contain」の状態を作ろうとしてたからだったかもしれません。（うろ覚え）今回のように「cover」の状態なら確かにmin-width: 100%; min-height: 100%;で行けますね。

kei344

2016/10/17 17:06

> contain max-height: 100%;, max-width: 100%; https://jsfiddle.net/tpx55o9o/3/

aKusano

2016/10/19 07:35

＞kei344さんなんでCSSだけで出来ないと思っていたのか思い出しました。 cover状態にしたい場合、ご教授いただいたようにCSSで一律に引き伸ばしをすると、枠内の画像が拡大されすぎて何だか分からない状態になる場合が考えられるんですよね。事前に画像が縦長なのか横長なのか判定して、縦長だったらmax-width、横長だったらmax-heightにして残りはoverflow:hidden;でカットするようにしないと、デザイン的にサムネイルの役割を果たさないものが生じる恐れがある。実務的にはここはおそらくマストな仕様となるはずなので、事実上できないと判断したのでした。。。 CSSだけだと、挿入されてくる画像素材次第な面が出てくるので厳しいなー、と思った次第です。とはいえ、条件がそろうならCSSだけでも出来ることを再確認させていただけたのでその点は助かりました。ありがとうございました！

行動規範の内容に同意します