【lightbox.js】クリックで指定した画像をズームで表示できる便利なjQuery

こんにちは、ハル@haru_elpisです。

画像をクリックすると背景が暗くなり、指定された画像がズームして再表示する「lightbox.js」の紹介です。

lightboxの使い方

ダウンロード

GitHub - lokesh/lightbox2: THE original Lightbox script (v2).

THE original Lightbox script (v2). Contribute to lokesh/lightbox2 development by creating an account on GitHub.

github.com

ダウンロードした「lightbox.css」・「lightbox.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/lightbox.js"></script>

HTML

<a href="images/sample-1.jpg" data-lightbox="sample-1" data-title="My caption">Image #1</a>


<a href="images/sample-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/sample-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/sample-4.jpg" data-lightbox="roadtrip">Image #4</a>

JavaScript

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>