HTML5 で lightbox2を使う
ホームページでは、サムネイルのように小さく表示するしかなかった写真を、マウスクリックで格好良いアニメーションで大きく表示させたい。この希望を叶えてくれるのが『lightbox』だ。
是非『lightbox』を使いたいと思って、ネットからインストール記事を調べてやってみたが、ネットからダウンロードしたファイルの処理方法が理解できず、細部について記載のない部分は、自分の思い込みでやってみた。その結果、写真の拡大表示は出来たものの、アニメーション動作は伴っていなかった。多分、lightbox をうまく使いこなせて無かった可能性が高い。
それで、さらにネットを調べて、トライアルしてみた結果、多少うまく動くようになったので、ここにその手順をメモとして記載しておく。
《Lightbox をHTMLで使うための環境設定》
私の環境で、lightbox を動かすために必要なファイル類は、下記になる。
1）先ず、ディレクトリツリーにぶら下げてある各ファイルをダウンロードしてきて、ご自分の環境のそれぞれのフォルダ（ie.： css,js,img ）にそのままコピーする。
css (下記の 2つのファイルは、《lightbox/css/》からdownload
├ lightbox.css
├ screen.css
js
├ jquery-1.11.0.min.js ← 《lightbox/js/》からdownload
├ lightbox.js ← 《lightbox/js/》からdownload
├ scriptaculous.js ← 《scriptaculous-js-1.9.0/src/》からdownload
img (下記の 4つのファイルは、《lightbox/img/》からdownload
├ close.png
├ loading.gif
├ next.png
├ prev.png
ダウンロード先：
lightbox に含まれるファイルのダウンロード先は下記URLから
http://lokeshdhakar.com/projects/lightbox2/
scriptaculous-js-1.9.0 に含まれるファイルのダウンロード先は下記URLから
https://www.musc.edu/js/scriptaculous-js-1.9.0/
念のため、私の環境に上記のファイルを適用（コピーした）後の css, js, img のフォルダは、次のようになっている。
├ index.html
├ bootstrap
│ ├ css
│ ├ js
│ ├ img
│
├ news
│ ├ index.html ← ２）で lightbox を使うための設定をする ｈｔｍｌファイル
│
├ img ← ここに lightbox を使いたい写真（ xxx.jpg ）などが入って居る
│ ├ 拡大図.jpg
│ ├ 縮小図.jpg
① css のフォルダ内
左のファイル構成の中にある、下から３つめのファイルと、下から２つめのファイルがコピー追加したファイルになる。
② js のフォルダ内
左のファイル構成の中にある、下から４つのファイルがコピー追加したファイルになる。
③ img のフォルダ内
左のファイル構成の中にある、下から４つのファイルがコピー追加したファイルになる。
《HTMLへの記載》
２）先ず、上記のディレクトリ構成の中で news/index.html ファイルの中に、lightbox を使うための書き込みをする。
<head>～</head> の中に、下記を追記します。
news/index.html から見たbootstrap/css, bootstrap/js, bootstrap/img 各フォルダのディレクトリの位置関係から、news/index.html の中には、下記のように表記することになります。この部分は、使われる環境によってディレクトリの記載を変更すること。
<head>
・・・・
<link href="../bootstrap/css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="../bootstrap/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/lightbox.js" type="text/javascript"></script>
・・・・
</head>
次に、<body>～</body>の中で、写真を拡大したいところを次のように記載する。
<body>
・・・・
<a href="../img/拡大図.jpg" rel="lightbox">LightBox の表示/動作<br>
<img src="../img/縮小図.jpg" width="300" height="200" alt="画像">
</a>
・・・・
</body>
ここで、縮小図.jpg は width と height で縮小時の画像サイズを指定しているので、縦横比が変わらないように縮小画像の高さと幅が選ばれているなら、特に拡大図は用意せずに、拡大図と縮小図は同じ図を使っても良いと思う。
以上で、html5にLightbox2が適用出来たと思いますが・・・、やってみてください。
《参考資料》
Lightbox2.5～2.6の使い方 （ShanaBrain)
http://shanabrian.com/web/library/lightbox2.5.php
« 自宅のLinux CentOS7サーバーでWordPress -3 | Main | HTML5 で ほんわか切替 キャプション付きスライドショウ »
「PC and PC troubles」カテゴリの記事
« 自宅のLinux CentOS7サーバーでWordPress -3 | Main | HTML5 で ほんわか切替 キャプション付きスライドショウ »
Comments