久々にlightboxを使おうと思ったら
バージョンアップしててですね
ネット検索すると「lightbox2.7」がヒットするけど
実際DLしてくると「lightbox2-master」になってて
ファイルの梱包内容もファイル名も違う(-''-)
lightbox2-masterの中身↓↓
・index.html
・bower.json
・CONTRIBUTING.md
・dist(フォルダ)
・Gruntfile.js
・LICENSE
・package.json
・README.md
・src(フォルダ)
この中で使うのは「dist」フォルダだけ。
1/ htmlファイルと同じ階層に「dist」フォルダを入れる。
2/ headタグ内に <link rel="stylesheet" href="./dist/css/lightbox.css">
3/ bodyタグ内に <script src="./dist/js/lightbox-plus-jquery.min.js"></script>
これで設置完了。これまでと違うのは3。
headタグ内に書いても動いてくれません。
4/ 画像の指定
<a href="拡大する画像URL" data-lightbox="グループ名" data-title="説明文"><img src="サムネイルURL" alt="代替" /></a>
data-lightbox="グループ名" は任意の文字。
いくつかレイアウトする写真に同じグループ名を与えると
「次(or前)の写真へ」機能を使える。
でも空にしておくとその画像にはライトボックス機能が効かないので
「次(or前)の写真へ」機能が不要でも何か別々の文字を書くこと。
同梱されてるサンプルファイル見ればすぐ分かることだった。
・・・けど2時間くらい迷走して疲れた。