こんにちは。
未来電子テクノロジーでインターンをしている@hotoke6です。
今回はwebページでページを移動せずその場で画像を拡大できる「LightBox2」の使い方について備忘録を残しておきます。
LightBox2とは
LightBox2とはJavaScriptのアプリケーションで、Lokesh Dhakarというエンジニアによって開発されました。
LightBox2を利用することで別ページを開かずそのページ上でサムネイルを拡大することが可能になります。
公式サイトの例
任意の画像をクリックすると、、、
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
このように画像を拡大した窓が開きます。
LightBox2の使い方
まずheaderでLightBox2のファイルを読み込みます。
<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.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</head>
1つ目のscriptタグはGoogle Hosted Librariesから拾ってきたjqueryのファイルですので、すでに書かれている場合は省略可能です。
次に拡大させたいimg src=""の画像ファイルを以下のようにa hrefタグで囲みます。
<a href="animal/monkey.jpg" data-lightbox="group">
<img src="animal/monkey.jpg">
</a>
a hrefの中には画像のリンクとdata-lightboxに任意のグループ名をつけます。
また必要な場合はdata-titleで画像にキャプションをつけることができます。
まとめ
以上、今回はLightbox2を用いて画像を拡大する方法をまとめました。