今回はColorboxというjQueryプラグインを使用することで、aタグを使用せずに、画像が拡大されたモーダルを表示する方法についてご紹介します。
Colorboxのメリットはaタグが不要であること
lightboxなど画像拡大するためのプラグインは他にもたくさんありますが、基本的にaタグが必要になります。
aタグが必要ということは、例えばCMSで記事を作成する際、モーダル表示したい画像のimgタグを都度aタグで囲む必要が出てきます。
画像の変更などメンテナンスが必要になった際にimgタグとaタグの両方を修正する必要が出てくるため、少々面倒な作業になります。
しかしColorboxプラグインであれば、aタグを使用せずとも、画像拡大のモーダル表示をすることができます。
Colorboxの使い方
以下の画像をクリックしてみて下さい。
このようなモーダル表示の実装を行えるように、
Colorboxの使い方についてご説明します。
まず、下記URLからダウンロードを行います。
https://www.jacklmoore.com/colorbox/
ダウンロードしzipファイルを解凍したら、直下のjquery.colorbox-min.jsと、いずれかのsampleフォルダからcolorbox.cssを該当のフォルダに移動し、headタグで読み込みを行います。
・cssの読み込み
<link rel="stylesheet" href="https://www.sample.com/colorbox/colorbox.css" media="all">
・jQueryの読み込み
<script src="https://www.sample.com/colorbox/jquery.colorbox-min.js"></script>
HTML
<img class="colorbox-img" alt="画像" src="https://www.sample.com/sample.png" width="1000" height="600">
imgタグに特定のクラスを付与します。
CSS
.colorbox-link {
cursor: zoom-in;
}
#cboxLoadedContent img {
width: 100%;
}
CSSは必要に応じて追記します。
（記述場所はcolorbox.cssで良いかと思います。）
上記サンプルコードでは、画像をホバーした時にズームインのカーソルに切り替わり、
モーダル表示された画像を横幅いっぱいに表示するためのCSSを記述しています。
jQuery
$(document).ready(function() {
$(".colorbox-img").on('click' ,function() {
$.colorbox({
href:this.src,
open:true,
maxWidth:"90%",
maxHeight:"90%"
});
return false;
});
});
Colorboxはモーダル表示させる画像のリンク先を指定することができるので、それを利用します。
画像をクリックしたときにimgタグのsrcを取得し、その値をクリック時のリンク先（href）に指定することで、aタグでimgタグを囲まなくても、画像をモーダル表示することができます。
Colorboxのオプションについては下記サイトより確認することができます。
参考）
https://www.jacklmoore.com/colorbox/
まとめ
以上のように、Colorboxを使えばaタグなしで画像のモーダル表示を行うことができます。
ぜひ実装してみてください。
(tamura)