« 自宅のLinux CentOS7サーバーでWordPress -3 | Main | HTML5 で ほんわか切替 キャプション付きスライドショウ »

01/31/2015

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 
← 2)で lightbox を使うための設定をする htmlファイル
      │
      
├ img ← ここに lightbox を使いたい写真( xxx.jpg )などが入って居る
      │    ├ 拡大図.jpg
      │    ├ 縮小図.jpg


① css のフォルダ内
Css_files 左のファイル構成の中にある、下から3つめのファイルと、下から2つめのファイルがコピー追加したファイルになる。




② js のフォルダ内
Js_files
左のファイル構成の中にある、下から4つのファイルがコピー追加したファイルになる。



③ img のフォルダ内
Img_files

左のファイル構成の中にある、下から4つのファイルがコピー追加したファイルになる。

 
《HTMLへの記載》

2)先ず、上記のディレクトリ構成の中で 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」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack


Listed below are links to weblogs that reference HTML5 で lightbox2を使う:

« 自宅のLinux CentOS7サーバーでWordPress -3 | Main | HTML5 で ほんわか切替 キャプション付きスライドショウ »

August 2019
Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Recent Trackbacks

無料ブログはココログ