みなさんこんにちは。takato（@enjoying_free）です！
webサイトをコーディングしている際、多くの画像を配置することがあると思います。
多く配置すると一つ一つの画像が小さくなってしまいますよね。そんな時に役に立つのが、画像をクリックすると拡大されるプログラムです。
ポートフォリオサイトや物件紹介サイトに多く使用されており、画像拡大が出来るとサイトのロイヤリティーが高まります。
今回は画像をクリックすると拡大表示される方法をみなさんに紹介したいと思います。
・画像をクリックして拡大表示する方法
作業の流れ
画像をクリックして拡大画像を表示させるには、拡大前の画像と拡大後の画像の二種類を準備します。
拡大前の画像サイズは元々サイトに載せる予定だったサイズで問題ないです。
拡大後の画像サイズは、実際に拡大させたいサイズに合わせて画像を保存してください。
拡大前の画像をそのまま拡大後用に使用すると、画像が荒くなってしまうため別々にします。
そのためコーディングに入る前に、同じ画像を二種類用意してください！
そのあとはHTMLファイルにjQueryコードを挿入し、拡大したい箇所にコードを記載して完成です。
jQueryコードを入力する
画像拡大はjQueryを使用します。HTMLファイルのhead内の</head>の真上に下記のコードを挿入してください！
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
ちなみに、上記のコードは画像の拡大を行いたいHTMLファイルに挿入してください。
他のページのHTMLファイルには挿入しないでください。
拡大したい箇所にコードを挿入
上記のコードをhead内に挿入できたら、拡大したい箇所に下記のコードを記入します。
<a href="拡大表示させる画像ファイル" data-lightbox="group"><img src="通常表示の画像ファイル"></a>上記のコードには2つ画像ファイルを挿入するところがあります。
最初の画像ファイルは拡大表示させる画像を挿入してください。順番を間違えないように気をつけてください。
適当にクラスをつけることもできるので、画像サイズなどは変更することができます。
最後に
以上が画像をクリックして拡大表示させる方法の紹介でした。意外と簡単だったと思います。
この記事を読んでいる方の中にはコーディングを独学で勉強している人もいるかと思います。
僕も独学で勉強していた時期がありました。コーデイングの勉強方法についてまとめた記事もあるので、合わせて読んでくれると嬉しいです。
他にも合わせて読みたい記事↓
