画像を拡大表示するJqueryプラグイン「Lightbox2」の実装方法

2015/12/20 2016/4/1 WEB制作

画像拡大系のプラグインが入っていない企業のWebサイトは存在しないっていうぐらいどこでも実装されてるアレです。
その中でも個人的には最も扱いやすいのはこの「Lightbox2」だと思っています。

■画像拡大Jqueryプラグイン「Lightbox2」

数あるプラグインの中でも上位に入る画像拡大プラグイン、そして商用利用フリーでもあります。

デモ(demo)：http://lokeshdhakar.com/projects/lightbox2/
GitHub：https://github.com/lokesh/lightbox2/

■実装手順（Jqueryがあまり古いバージョンだと動かないかもしれません）

GitHubからファイルをダウンロード
ファイルを解凍して、「lightbox.js」「lightbox.css」を所定の位置へアップロード
「images」ファイルを「../images/close.png」などが正常に動作するように所定の位置へアップロード
<head>内に以下のように記述

js,cssの読込
Default

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

1
2
3
拡大させたい画像に以下のように記述

画像を拡大する記述
Default

<a href="画像のURL" data-lightbox="任意の名前(同名にするとグループ化される)" data-title="説明文"><img src="画像のURL" /></a>

1

以上で設定は完了です。
3番のファイル名や場所は個々で編集して利用することもおすすめします（lightbox.cssを編集）。
「data-lightbox」を同名にすると画像の横の方に矢印が表示され、次の画像に切り替えるアレです。
「data-title」は拡大された画像の下に表示される文章になります。

何か質問、誤情報、誤字などがあればコメントでお願いします。

関連記事