Pocket

今回は第1回、第2回に引き続きライトボックス作りを行いました。

第2回では、

• 画像の幅と高さを調べて中央へ表示
• 画像の読み込みが完了してから表示
• 画像がウィンドウよりも大きい場合はウィンドウからはみ出さないようにする。

の3つにチャレンジした結果、表示した画像の比率が変わってしまっている（泣）

という課題が残ってしまったので

今回は画像の比率も保ったままブラウザの中央へ表示させてみました。

出来上がったコードはこちら

http://jsdo.it/Masaki.Nakamura/z1LP

画像の比率を出す

縮小した画像の比率（縦横比）が変わってしまっていたのなら先に比率を求めてその比率を維持したまま縮小すればいいわけです。

以下の計算式で比率を求めます。

比率 =  画像の幅/画像の高さ

すると以下の計算式で縮小した幅から縮小すべき高さを求める事ができます。

縮小すべき高さ = 縮小した幅 ÷ 比率

幅がはみ出ていれば幅を、高さがはみ出ていれば高さを縮める

どちらが先でもいいんですが、まず幅とWindowの幅を比較してWindow幅の80%よりもはみ出ていれば幅を縮めます。

そして先ほど求めた比率で高さを求め高さも縮めます。

if( gazouW > winY*0.8 )
{
　gazouW = winY*0.8;
　gazouH = gazouW/hiritu;
}

さらに高さも同じようにWindow高と比較してはみ出ていれば縮め、幅は高さと比率から求めます。

if( gazouH > winT*0.8 )
{
　gazouH = winT*0.8;
  gazouW = gazouH*hiritu;
}

これでWindowからはみ出ずに比率も保ったまま画像を表示することができました。

おまけ　短いコードにまとめてみた

メンバーの一人がこのコードでもできるかも！と考えてくれました。

if(gazouW > winY*0.8 && gazouW>=gazouH){
　gazouW = winY*0.8;
　gazouH = gazouW/hiritu;
}else if(gazouH > winT*0.8 && gazouH>gazouW){
　gazouH = winT*0.8;
　gazouW = gazouH*hiritu;
}

その時はうまく表示できたー！と終わったんですが、考慮できていない点がありました。

さてなんでしょう？次回までの宿題にしまーす。

TERAKOYAの様子