ドイス「K]・HPのカッコイイ写真表示の方法 LightBox使用
私は、ウェブサイト製作の技術は全然ありません。スタイルシートもまともに組むことができませんが、このサイトを作るときに、写真の表示だけは、ちょっとかっこよくしたいな～と思っていました。で、検索して調べて、表示できるようになりました。
lightbox.jsという写真表示のjavascsript libraryを使ってみました。
特徴としては、
・写真を表示する際に、画面が暗くなり、写真表示部分が目立つ
・表示方法が工夫されているので、多少思いファイルでもDL時間が気にならない
・写真セットすると二枚目以降の表示も速い
ということでしょうか。
元のホームページはこちらから。
LightBox2 by Lokesh Dhakar
①LightBox2の ダウンロードページよりlightbox2.04.zipをダウンロード、解凍。
②lightbox.jsとlightbox.cssに画像ファイルの場所が指定されているので、アップロードす る場所を考えて（必要に応じて）修正。
オリジナルでは、画像ファイルはimagesファイルに指定されている。
③必要なフォルダやファイルをアップロードする。ダウンロードしたものからindex.htmlファイル以外をすべてアップロードすればOK。サンプル写真は削除してOK。
④以下のジャバスクリプトをhead タグの内側に入れる
<script
type="text/javascript" src="js/prototype.js"></script>
<script
type=
"text/javascript"src="js/scriptaculous.js?load=effects,builder"></script>
<script
type="text/javascript" src="js/lightbox.js"></script>
⑤lightbox用のCSSファイルへのリンクを head タグ内へ入れる。
<link
rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"
/>
⑥
bodyタグ内に写真へのリンクを貼る。
<a
href="images/ここに写真ファイル名.jpg" rel="lightbox"
title="タイトルを入れる">画面上に表示させるもの</a> という感じで完了すると思います。
専門用語や、技術的におかしなことを書いたかもしれませんが、なんとか工夫してみてください。
| この写真表示方法を使って、ナミビア・ヒンバ族の写真を紹介しています。 |