どうも、リュウセイです！
今回は「javascriptを使って画像をポップアップ表示させる方法」というテーマで記事を書いていきます。
画像をクリックすると背景が暗くなって画像だけが拡大表示されるサイトを見た。面白そうだから自分のサイトにも実装してみたいけど、どうやれば良いか分からない･･･。
そう思った事はありませんか？
それは「ポップアップ機能」と言って、画像をクリックした時に画像が拡大表示されるのもポップアップ機能を使ったものなんです。
大きいサイズの画像を貼るとその分ファイル数も大きくなるので、出来る限り小さいサイズで貼りたいですよね。しかしそうすると画像が見づらくなってしまう･･･。
そんな時にこの方法が便利です。
Javascriptによる画像のポップアップ表示の例はこんな感じのやつです↓
画像をクリックすると分かると思うのですが、恐らくあなたが求めていたものはこんな感じのやつだと思います。違ったらすみません。
今回はその実装方法について解説していきますね。
- 画像のポップアップ表示のやり方が分かる
- Webサイトをオシャレに表現できる
- Webサイトのユーザビリティ(使いやすさ)が向上する
目次
画像のクリックで拡大画像がポップアップ表示される方法
Javascriptというプログラミング言語を使うことで実装が出来ます。
まずは、Javascriptコードをテーマヘッダー(header.php)に貼り付けていく作業からです。
コードを所定の位置に貼り付けるだけなのでさほど難しくないと思います。ちなみにWordPressでのやり方で解説していきます。
テーマヘッダー (header.php)にコードを挿入する
<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>
上記のコードをテーマヘッダー (header.php)の<head>の直ぐ上に貼り付けていきます。
貼り付けた後は必ず「ファイルの更新」ボタンをクリックしてくださいね。
これで仕込みはOKです。
ポップアップ表示させる画像を挿入したい箇所にコードを挿入する
仕込みが終わったら、次はポップアップ表示させる画像を挿入したい箇所に下記のコードを貼り付けていきます。
<a href=”gazou1.jpg” data-lightbox=”group”><img src=”gazou1.jpg” width=”300″></a>
ただ、このコードをそのまま貼り付けるだけでは作動しません。
コード内に２箇所ある「gazou1.jpg」の部分を、あなたが挿入したい画像のURLに置き換える必要があります。
じゃあ挿入したい画像のURLはどこで取得したら良いのかって言うと、「メディア」にアップロードされた画像から取得することが可能です。
WordPressダッシュボードの「メディア」をクリックして、「添付ファイルの詳細」の「リンクをコピー」からリンクを取得する
この画像リンクを、
<a href=”gazou1.jpg” data-lightbox=”group”><img src=”gazou1.jpg” width=”300″></a>
２箇所の「gazou1.jpg」の部分に挿入します。こんな感じに↓
<a href=”https://ryusei-komada.com/wp-content/uploads/2020/08/f3101ddad7cd870d6c2b7d9b3ee1abfa.jpg” data-lightbox=”group”><img src=”https://ryusei-komada.com/wp-content/uploads/2020/08/f3101ddad7cd870d6c2b7d9b3ee1abfa.jpg” width=”300″></a>
コードは完成したので、後は上記のコードを記事内に貼り付けるだけです。
で、貼り付けたやつがこれです↓
これで、画像のクリックでポップアップ表示させる方法は完了です。
ちゃんと動作しているか確認してみてくださいね。
ちなみに、コード内にある「width=”300″」の「”300″」の数値は変更することも可能です。
ここを変えると、クリックしていない状態で表示されている画像サイズを変更できます(50に変えてみました)↓
クリックして表示される画像サイズ(ポップアップ時の画像サイズ)は、アップロードした時の画像サイズで表示されます。
ポップアップ時の画像サイズを変更したい場合は、「メディア」の「添付ファイルの詳細」から縮尺の変更が出来るのでそちらから変更してください。
Javascriptのデメリット
今回紹介した画像のポップアップ表示はJavascriptで実装するものですが、Javascriptにはデメリットが主に２つあります。
デメリットは下記の通り↓
- 動作の際に解析、解釈、変換という実行プロセスを必要とするので、他のプログラミング言語よりも実行速度に影響が出やすい
- 進化の早い言語なので、ブラウザ側のバージョンが対応していないと表示出来なくなるというケースもある
Javascriptは「解析」→「解釈」→「変換」という実行プロセスで成り立っているため、あまり多用しすぎるとサイトの表示速度に影響が出る可能性があります。
なので、なるべく必要な箇所にだけ実装するようにしましょう。
サイト表示速度の低下によるデメリットは「サイトの表示速度を改善させるために必要なこと」の記事で詳しく解説しているので、合わせて読んでみてください。
まとめ
今回の記事を執筆するにあたって、下記サイトを参考にさせていただきました。ありがとうございました。
画像をクリックしたら、拡大画像がポップアップで表示される方法
他記事も参考になるものが多いので、良かったら覗いてみて下さい。
それでは、今回はこの辺で。
ありがとうございました。
ﾁｬｵ(･∀･)！
オマケ
「Javascript」は1995年にサン・マイクロシステム社によって開発されたプログラミング言語。
読みは「ジャヴァスクリプト」だが、開発当時の呼び名は「LiveScript（ライブスクリプト）」だった。
95年生まれ･･･
なんか、親近感が湧く！
コメントを残す