<script src="js/lightbox.js"></script>画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)
lightbox
[公式サイト 英字サイト]
http://lokeshdhakar.com/projects/lightbox2/
日本語サイト
http://www.chamanet.com/lightbox/
Lightboxの導入方法とサンプルのダウンロード
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Lightboxのサンプル | |
| サンプルページ | サンプルページの写真をクリックするとLoghtboxが起動します。 サンプルページのHTMLファイルはこちらからダウンロード出来ます。 |
| Lightbox導入方法 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| １．ダウンロード | LightBoxサイトからLightboxをダウンロードして下さい。 ダウンロードはこちら（ページの中央あたりのDOWNLOAD） |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ２．ZIPファイルを解凍 | LHACA、LHASAなどで解凍して下さい。 解凍すると「css」「images」「ｊｓ」が作成されます。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ３．サーバーに転送 | Lightboxに対応させたいページと同じフォルダに「css」「images」「ｊｓ」を転送します 転送後、ディレクトリ構造はこのようになります
※ 解凍した「images」の中の「image-1.jpg」と「thumb-1.jpg」は不要です |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ４．HTMLタグの編集 | Lightboxに対応させたいページのHTMLタグを編集します。 HTMLページの１行目に を挿入し、<TITLE></TITLE>の次の行に を挿入します。 各写真のHTMLタグを下記のように修正します。 グループ名は「aiueo」や「abc」など自由な半角英字で指定します。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
PhotoshopのWEBフォトギャラリーの機能を使う
(↓使い方の紹介サイト)
http://cashari.net/use/p_album/p_album_web_gallery_1.htm