「画像をクリックで拡大」する機能をつける方法【プログラミング練習】

日々の学習

プログラミング学習のアウトプットで簡易的な掲示板を作成しました。
最低限の機能をつけるスキルしかなかったので、少しずつ機能の充実させていっています。

今回は、画像をクリックしたら拡大する機能をつけたくて、検索しまくりました。
あまり理解していないJavaScript(jQuery)と格闘しましたが、何とかそれっぽいものができあがったので記録しておきます。

jQueryを記述する

やりたいことは、以下になります。

DBから120px×120pxに縮小して表示させている画像を、クリックでその場で拡大させる。
※別窓ではなく、その場で拡大して閉じる動作をつける

以下の順で、click()、fadeIn()、fadeOut()を使いながら、検索を駆使して何とか完成しました。

① 画像がクリックされたらその場で拡大画像を出現させる
② 拡大画像がクリックされたら、拡大画像を消す
③ 拡大画像のサイズをCSSで設定する

散々ググりまくりましたが、自力でできると自信がつきます。
自分で調べて自分でやってみる、という経験がとても大事ですね。

LightBoxという優れたJavaScriptアプリケーション

ところで検索する都度「lightbox」をいう単語を見かけていましたが、よく分からないので無視していました。
しかしあとで見たところ、何と簡単に同じことが出来るとのこと。

最初にやっておけば良かったと思いましたが、1度自分でやってみたからこそ理解ができたのだと思います。
次回はこちらを使って実装してみましょう。

★内容は、こちらから確認できます。
Lightbox

おわりに

こんな小さなことですが、自分でやりたいことがプログラミングで出来ると嬉しいものです。
こういった成長を積み重ねながらレベルアップしていくのでしょう。

ところでかなり時間をかけましたが、まだ不十分なところがあります。
それは、クリックで拡大画像を閉じることはできるものの、「ESCキー」で閉じることができないこと。

もしかしたら、LightBoxで何とかなるかもしれません。
次の課題といたします。

タイトルとURLをコピーしました