LightBox導入！(2015年）
読むのにかかる時間:2 分, 22 秒ぐらい
年末の更新に向けて、HPにLightBoxを導入することにしました。
Twitterで作っていた、文章の入った画像をコンテンツとしてまとめていこうかなと思いたち、それぞれの画面でそれなりに表示されるLightBoxが良いなと。
1.ダウンロード
http://lokeshdhakar.com/projects/lightbox2/
上のサイトがLightBoxの公式サイト。
こちらにアクセスして、DOWNLOADをクリックします。
サイト内は全て英語ですが、特に読む部分は無いので、気軽に行きましょう。
2.展開～保存
圧縮ファイルをダウンロードして、展開するといくつかのフォルダがあります。
その中にdistというフォルダがあり、これだけが必要なものになります。
このフォルダの中に、css,images,jsという三つのフォルダがあるので、これをコピーして、LightBoxを使うコンテンツを収録しているフォルダに貼り付けます。
3.設定
まず、HEAD内にLightBosxを使うための記述を追加します。
＜HEAD>
～～～～～～～
<link rel=“stylesheet” href=“css/lightbox.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=“js/lightbox.min.js”></script>
～～～～～～～～
</HEAD>
4.リンクにも追加の記述
<a href=“○○.jpg” data-lightbox=“※何でも良いのでグループ名”><img src=“○○jpg” width=”520″ Height=”320″ /></a>
リンクのタグにのみ追加で、data-lightboxという記述が入ります。
それ以外は普通のリンクタグなので、たとえばimgタグを文字に変えれば、文字のリンクをクリックするとLightBoxによる画像の表示が行われるという形にも出来ます。
それ以外は普通のリンクタグなので、たとえばimgタグを文字に変えれば、文字のリンクをクリックするとLightBoxによる画像の表示が行われるという形にも出来ます。
5.動かない！！
どのサイトを見ても、上記のような記述で終わってるんですよね。
でも、動かなくて困っていたら、同じような症状に陥った方のブログを発見。
<script src=“js/lightbox.min.js”></script>
この記述を、一番下の辺りにある</body>の真上に書くというもので、関係ないだろ…と思いつつ、試してみたらOKでした。
動きました。
この記述を、一番下の辺りにある</body>の真上に書くというもので、関係ないだろ…と思いつつ、試してみたらOKでした。
動きました。
後は、使いたい形でキャプションを加えたりしながら使えばOKです。
少し記述が増える以外は、使い慣れたリンクタグと変わらないので、簡単です。
Happy
0 %
Sad
0 %
Excited
0 %
Sleepy
0 %
Angry
0 %
Surprise
0 %
