サムネイルをクリックすると背景が暗くなり、画像を拡大するJAVAスクリプト「Lightbox」。
画像が複数ある場合は、拡大画像の左右にカーソルを乗せると「PREV」「NEXT」アイコンが現れ、ナビゲート。
ウェブ・アルバム製作なんかに便利です。
1. ダウンロード
以下のサイトから Lightbox をダウンロード。
http://www.huddletogether.com/projects/lightbox2/#download
解凍すると、以下のフォルダが展開されます。
・ css
・ images
・ js
・index.html
2. <head></head>の間に以下を追加
<head>
<title>○○○</title>
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
<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>
</head> |
3. 画像の設定
各拡大画像とサムネイルを用意し、「images」フォルダへ格納。
HTMLを以下のように書き換えます。
<a href="images/拡大画像01.jpg"
rel="lightbox[roadtrip]"
title="コメント">
<img src="images/サムネイル01.jpg"
border="0" width="○" height="○"></a> |
あとは、以下のファイルをアップロードするだけ。
簡単です♪
・ css
・ images
・ js
・画像を貼り付けたHTMLファイル |
