画像をクリックしたら拡大される方法を紹介！

2021年12月18日2023年12月2日

takato（@n8takato）です！

画像をクリックしたら拡大表示されるように設定したい

この記事は上記の課題に向けて作成しています。

web制作では画像が拡大表示する設定を行うことがあります。

画像の拡大表示は簡単に実装出来ます。

この記事では画像をクリックしたら拡大表示される方法を紹介します。

この記事を読むメリット

画像をクリックすると拡大表示される方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です！

都内制作会社でwebデザイナー・webディレクターとして勤務
webデザイナー3年、webディレクター1年目
web制作現場で学んだことを発信している人

〜個人的にオススメなwebデザインスクール3選〜

今なら無料オンライン説明会実施中です！
興味のあるスクールに申し込んでみてください！

画像をクリックして拡大させる方法

早速画像をクリックして拡大させる方法を紹介します。

下記動画が完成系です。

拡大表示させる手順は下記の通りです。

jQueryタグを挿入する
画像に拡大表示設定を行う

jQueryタグを挿入する

始めにjQueryタグを挿入します。

挿入するコードは下記のものになります。

<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ファイルの<head>の中に入れてください。

※</head>の直前に入れておけば大丈夫です。

画像に拡大表示設定を行う

続いて画像を拡大表示させる設定を行います。

設定に使用するコードは下記の通りです。

<a href="拡大表示画像のリンク" data-lightbox="group"><img src="サイトに表示する画像のリンク"></a>

「拡大表示用の画像」と「サイト表示用の画像」のリンクを貼れば完成です。

※「拡大表示用」と「サイト表示用」それぞれ同じサイズの画像を使用する場合は、同じ画像リンクを記入して大丈夫です。

画像の拡大表示は簡単に実装出来る！

最後にまとめです。

画像をクリックすると拡大表示される手順

<head>内にjQueryコードを挿入する
画像に拡大表示設定を行う

画像の拡大表示は簡単に実装することが出来ます。

まだ実装したことの無い方は是非行ってみてください。

リンク

コーディングに関する他の記事はこちら

URLをコピーしました！