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

Pocket

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

スポンサーリンク

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

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

Lightbox

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

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

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

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


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

Pocket