設置がとても簡単になった画像拡大スクリプト「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>

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

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

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

<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>

 

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

jQuery CDN – Latest Stable Versions

Lightbox

余談

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

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

 

コメント

タイトルとURLをコピーしました