画像をクリックしたら拡大表示されるように設定したい
この記事は上記の課題に向けて作成しています。
web制作では画像が拡大表示する設定を行うことがあります。
画像の拡大表示は簡単に実装出来ます。
この記事では画像をクリックしたら拡大表示される方法を紹介します。
この記事を読むメリット
- 画像をクリックすると拡大表示される方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
目次
画像をクリックして拡大させる方法
早速画像をクリックして拡大させる方法を紹介します。
下記動画が完成系です。
拡大表示させる手順は下記の通りです。
- 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>「拡大表示用の画像」と「サイト表示用の画像」のリンクを貼れば完成です。
※「拡大表示用」と「サイト表示用」それぞれ同じサイズの画像を使用する場合は、同じ画像リンクを記入して大丈夫です。
このサイトでは他にもスムーズスクロールのやり方を紹介しています。
あわせて読みたい
スムーズスクロールをjQueryで実装する方法を紹介！
スムーズスクロールをjQueryで実装したい この記事は上記の課題に向けて作成しています。 スムーズスクロールはweb制作で頻繁に使用されます。 jQuerを使用することで簡...
画像の拡大表示は簡単に実装出来る！
最後にまとめです。
画像をクリックすると拡大表示される手順
- <head>内にjQueryコードを挿入する
- 画像に拡大表示設定を行う
画像の拡大表示は簡単に実装することが出来ます。
まだ実装したことの無い方は是非行ってみてください。
リンク