設置がとても簡単になった画像拡大スクリプト「Lightbox2」

サムネイル画像(縮小画像)がクリックされた際に、その場で拡大画像を表示させるスクリプト、定番は「Lightbox」。昔はいろいろ設置が面倒だったんですがCDNの利用が広まりとっても簡単になりました。

CDNの読み込み

<!-- lightbox -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.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>

ダウンロードはこちら

CSSは<head>～</head>内、scriptは<head>～</head>内、又は</body>タグの直前。

HTMLの記述方法

<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>
<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>
<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>

</a>

</a>

</a>

クリック元、拡大画像を指定するだけ、基本はこれだけで動きます。

data-lightbox=”abc”　でグループを決めておくと拡大したまま順番に画像が見られます。

オプションが必要な場合は追加。

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

lightbox.option({

'resizeDuration': 200,

'wrapAround': true

})

</script>

オプション詳細

サンプル

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lightbox2サンプル</title>
<!-- lightbox -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</head>
<body>
<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>
<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>
<a href="http://placehold.it/800x800" data-lightbox="abc" data-title="拡大画像">
   <img src="https://placehold.it/200x200" alt="クリック元の画像">
</a>
</body>
</html>

<!doctype html>

<html>

<head>

<title>lightbox2サンプル</title>

<script

src="https://code.jquery.com/jquery-3.3.1.min.js"

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous"></script>

</head>

<body>

</a>

</a>

</a>

</body>

</html>

サンプルではjQueryスクリプトは3系です、ページの環境で上手く動かない場合は2系、1系を試してみてください。

jQuery CDN – Latest Stable Versions

Lightbox

余談

先般Bootstrap4のサイトで「Lightbox」系「ekko-lightbox」を試したんですが「IE」だけ上手く動きませんでした。

やっぱり「Lightbox2」が一番安定しているみたいです。