webデザイナーのtakato（@enjoying_free）です！
webサイトをコーディングしている際、多くの画像を配置することがあると思います。
多く配置すると1つ1つの画像が小さくなってしまいますよね。そんな時に役に立つのが、画像をクリックすると拡大されるプログラムです。
ポートフォリオサイトや物件紹介サイトに多く使用されており、画像拡大が出来るとサイトのロイヤリティーが高まります。
今回は画像をクリックすると拡大表示される方法をみなさんに紹介したいと思います。
クリックすると画像が拡大される方法を紹介するよ〜！
拡大表示設定の手順
画像をクリックすると拡大表示される手順は、下記のようになります。
拡大表示される設定の手順
1.拡大表示したい画像の用意
2.拡大表示用の画像の用意
3.拡大表示の設定を行う
拡大表示用の画像も用意しなければいけないの？？
その通り！同じ画像を2種類のサイズで用意する必要があるよ！
拡大表示用サイズの画像を用意する必要がある
クリックすると画像が拡大表示される設定を行うには、拡大表示された際に表示する画像を用意しなければいけません。
つまり同じ画像を2つのサイズで用意しなければいけないということです。
拡大表示前の画像をそのまま拡大表示用に使用することも可能ではあるのですが、サイズの小さな画像を拡大表示すると画像が荒くなってしまいます。
そのため拡大表示用の画像は別に用意する必要があるということです。
拡大表示された画像が粗くならないために、大きいサイズの画像も用意する必要があるということなのか！
そういうことだよ！
画像準備のコツ
既にある画像を拡大したものを用意すれば良いってこと？
そのやり方だと画像が荒くなってしまうんだ
拡大表示画像の準備方法として、既存の画像を拡大して用意する方法だと画像が荒くなってしまいます。
画像は小さいサイズのものを拡大すると荒くなりますが、大きいサイズのものを縮小する分には荒くなりません。
つまり、最初に拡大表示する画像を用意して、webサイトに載せる画像サイズに縮小する方法が正しいやり方です。
初めに拡大表示用の画像を用意して、複製したその画像のサイズをwebサイト用に縮小すればいいんだね！
そういうこと！
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>
挿入し終わったらjQueryの導入は完了です。
次はHTMLで実際に拡大設定を行います。内容は簡単で、下記のコードを編集して任意の場所に記入してください。
<a href="拡大表示させる画像ファイル" data-lightbox="group"><img src="通常表示の画像ファイル"></a>
それぞれの場所に画像のディレクトリを入力することで、クリックすると拡大表示される設定を行うことができます。
最初に入力する画像は拡大表示させる画像なので、間違わないように気をつけてください！また、クラスをつけることで画像サイズの変更などを行うこともできます！
最後に
以上が画像をクリックして拡大表示させる方法の紹介でした。そこまで難しい内容ではないと思いますが、拡大画像の準備の仕方を間違えると荒くなってしまうので、そこだけ注意してください。
この記事を読んでいる方の中にはコーディングを独学で勉強している人もいるかと思います。
僕も独学で勉強していた時期がありました。コーデイングの勉強方法についてまとめた記事もあるので、合わせて読んでくれると嬉しいです。
他にも合わせて読みたい記事↓
