javascriptを使った手動スライドショー
と言っても画像は手動でスライドさせます。勝手にスライドされるものよりも使い勝手は良いと思う。
綺麗な写真を大きく見せたい場合にかなり有効です。見た目もまずまずかと
設置法
次のファイルをダウンロードして解凍してください。
js.zip(60KB)解凍したら「js」というフォルダができると思います。その中のphotoというフォルダに写真なんかの画像を入れておきます。サイズの目安は横が600px〜800pxぐらいがちょうどいんじゃないかと。あんま大きすぎてもね・・・。
「greybox」フォルダはjavascriptなんかのファイルが入っているので、そっとしておきましょう・・・。
んでは画像を表示させるhtmlファイルに必要な記述をしましょう。
簡単に言うと、今解凍したものの中にjavascriptのファイルがあるので、htmlファイルにjavaのファイルはここにあるよと教えてあげる必要があります。
ではまず、htmlファイルのhead内に以下の記述をします。
ここで大事なのがファイルのパスです。src="js/greybox/AJS.js" となってるところに注目してください。
これはいわゆる相対パスです。htmlファイルと同じディレクトリ（階層）にある場合の記述ですので、このまんま使うのであれば、htmlファイルと同じフォルダに先ほどのjsフォルダを入れる必要があります。
今度はbody内の記述です。
まずリンクに対してスライドショーを設定するので、（クリックでスライドショーが始まるので）、aタグを使って以下の記述をしてくんさい。
これでスライドショーという文字をクリックするとスライドショーが始まります。
ここで仕上げ〜。以下の記述を今のリンクの下辺りにでも書いてください。どこでもたぶん問題ないです。
画像のパスは相対パスで書きます。 js/greybox/AJS.jsファイルから見た相対パスです。デフォルトのままだと、階層を1つ上がりますので、 ../photo/〜.jpgとなるはずです。表示されない場合はたいがい相対パスの記述ミスです。 ../../などを試してみましょう。 絶対パスでも指定できますが、アップしてからじゃないと当然表示されません。絶対パスの場合はhttp〜からはじまって最後は.jpgで終わるはずです。
これで完了〜！あとはアップしてリンクをクリックすればおｋ！
うまくいかない場合はこのサイトのソースを見てちょ！
表示されない原因はどこかのパスの記述が間違っているはず！
ただこのサイト、euc-jpていう文字コードで書いてるからInternetExplorerで表示させちゃうと日本語部分が文字バケします・・・。
まぁ日本語部分は見なくてもいんだけど、気になる場合、FireFoxでソースを表示させるとちゃんと全部表示されます。参考までに・・・。
そんで結局おまえなに言ってんの？？って人には無理かもしれません・・・。今さらだけど（汗
そんなに難しくないのでやってみる価値はあると思う。
以上、javaを知らずにjavaを使う！でした〜っ！！
 すぐに使えるJavaScript |
 javascriptとCSS（スタイルシート）を利用した タブメニューの作り方 |