jQueryプラグインのLightBoxを試してみる

jQueryプラグインLightBoxを試してみる。

Lightbox
http://lokeshdhakar.com/projects/lightbox2/

※バージョンは2.7.1を使用。

ファイルを下記のような感じで設置。

├ index.html
├ css
│└ lightbox.css
├ img
│├ close.png
│├ loading.gif
│├ next.png
│├ prev.png
│└ sample.png
└ js
  └ lightbox.min.js

HTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="css/lightbox.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
</head>
<body>
  <a href="img/sample.png" data-lightbox="sample">画像</a>
</body>
</html>

デモ