lightbox.jsでかっこいいギャラリー

  • 投稿日:
  • by
  • カテゴリ:  
    • このエントリーをはてなブックマークに追加

使いやすくて、かっこいい!!ギャラリーが作れるぜ!

僕が今回適用してみたサイトのページは、これまたZEN DISTROライダー写真ページです。

僕の写真もたくさんあるので、見てみてください。

で、これは写真のサムネール画像をクリックするとモワッて感じで写真が出てくるんだ。

別窓が開くわけでもなく、開いているブラウザ上で画像が展開するので、見ているユーザーは使いやすくて楽チン。

大元のサイトは英語で書いてあるんだけど
インストール方法をざっくり紹介しますね。

1.まずはダウンロードをします。ここをクリックしてDownLoadを英語を探してください。

2.ZIPファイルを解凍した、フォルダ(css,js,images)を自分にコピーしてください。

3.このギャラリーを実現したい、ページのヘッダーに以下のように、JavaScript,CSSをインクルードしてください。

<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" />

3.CSS(lightbox.css)の中をチェックしてくださいね。 next.gif , loading.gif , close.gifのパスが正しいかをチェックして修正してくださいね。

OK!ここまでおりかえし地点です。

4.画像へのリンクに rel="lightbox" を以下のように加えてください。


<a href="images/image-1.jpg" rel="lightbox" title="画像の説明">image #1</a>

画像の説明を書き足したいときは title=”ほげほげ” で何か書いてください。


5.もし、複数の画像を一つのグループで次から次へと表示したいときは、以下のようにrel="lightbox[roadtrip]" のように書いてください。

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>


こんな感じです。
例はこんな感じです。

関連記事

植山周志のマーケティング分析オンライン入門講座