質問: 現在HTML,Javascript(jQuery),colorboxを使ってモーダルダイアログに画像を表示する機能を作っています。 画面 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fdf7d3f22cf8976083ecbf8df326fc38.png) 質問があるのですが、 結論から言うと、 **colorboxによるモーダルダイアログのリサイズをして、画像が全部表示されるようにするにはどうしたらいいでしょうか?** 状況としてはファイル選択ボタンを押下し、ローカルフォルダから画像を選ぶと、 モーダルダイアログに表示される。 というコードを書いています。 しかし、リサイズがうまくいっていないからか、**リサイズするときにまだ画像が表示されていないからかわからないですが、 うまくリサイズすることができません**。 モーダルダイアログが下で切れてしまいます。 ファイル選択時 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e44f5d701d20ba0ac6a361566ad6d1d7.png) 実際のコードは以下です。 ``` Inline HTML インラインHTML ``` しかし画像表示後(画像切れている状態で)、chromeのデベロッパーツールのコンソールに$.colorbox.resize();と入力するとちゃんと表示することができます。 あとから $.colorbox.resize(); ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2838f247ea9b8d4aae77abd726f70ddd.png) **これを実際のコードでも画像が切れず、ちゃんと表示されている状態を実現したいのですが、どうすればいいでしょうか?** もしわかる方がいればよろしくお願い致します。
回答: 以前されていた質問に回答・コメントさせていただきましたが、イベントドリブンという視点で考えればおのずと答えが見えてくるのではないかと思います(たぶん)。 ``` reader.onload = function() { $('#thumbnail').attr('src', reader.result); } $.colorbox.resize(); ``` というコードでやっているのは、 1. `reader` の `onload` イベントのハンドラの中で `('#thumbnail').attr('src', reader.result);` を実行。すなわち、`reader` の `onload` イベントが発生したときに `img#thumbnail` に画像を載せる処理を走らせる、ということを登録する 2. `$.colorbox.resize();` で colorbox にリサイズイベントを発生させる 3. colorbox のリサイズイベントハンドラが実行される ということです。1. では `reader` の読込みが終わったら実行する処理を登録しているだけで、実際の読み込みは終わっていません。 その状態で 2. が実行されています。 少なくとも、`$.colorbox.resize()` は画像読込みが終わってから実行すべきでしょう(未検証なので、これだけで目的の動作が達成されるかどうかはわかりません)。 ``` reader.onload = function() { $('#thumbnail').attr('src', reader.result); $.colorbox.resize(); } ```