こんにちは。
未来電子テクノロジーでインターンをしている@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を用いて画像を拡大する方法をまとめました。