なんだかんだで、このデザインのまま 1年以上放置していることになってます、我がサイトですが、なにもしてないわけではなくちょっとずつ。ちょっとずつ変更されてます。
で。ずっと気にしていた、画像をクリックするとにょろっとでてくるヤツ。あれが、今日、やっとなにものか分かったので、喜んで入れてみましたです。
Lightbox 2 っていう、ちょっと小粋なヤツです。
導入もなにも、書いてあるとおりで簡単でした。
とりあえず、index.html のおいてあるところに、必要なファイルを以下のように配置します。ま、download してきた zipファイルの中から、index.html以外を uploadすればいいんですけどね。
- /js/prototype.js
- /js/scriptaculous.js
- /js/lightbox.js
- /css/lightbox.css
- /images/配下
それで、後はこれを使用できるように、<head>〜</head> 内に次の 4行を入れておきます。
(2/2追記) Serene Bach だと、index.html 以外のページは directory が変わってしまうので、directory 指定を相対にするよりも、絶対にした方がよいと思われます。
もし、http://foo.bar/js/以下に scriptを配置したのなら、/js/prototype.js のように、頭に ‘/’ をつけたりした方がよいです。
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
これで事前作業は完成です。
後は、画像リンク部分にちょっといたずらが必要ですね。
<a href=”/img/sample.jpg” rel=”lightbox”>
こんな感じで、rel=”lightbox” が必要になります。
左のハルヒをクリックすると画面がぐりゅっとでてくる気がします。
また、lightbox2 だと、グルーピング機能が使えたりします^^
<a href=”/img/sample01.jpg” rel=”lightbox[group]”>
<a href=”/img/sample02.jpg” rel=”lightbox[group]”>
<a href=”/img/sample03.jpg” rel=”lightbox[group]”>
こんな風に、lightboxの後に[グループ名] とすることで、そこをグループさせてスライドショーのように表示させることができるそうです。
左のハルヒをどっちかクリックして、画像にカーソルを持っていくと、[PREV]や[NEXT]などが表示され、それをお酢と前後の画像が表示されるです。
昔から考えると、サイトの表現力って増えたよな。JavaScript オフだぜとか言ってられなくなりました。
Lightboxがきかない場合があるのは、なんなんだろう。
なぞだ。