javascriptを使った手動スライドショー

と言っても画像は手動でスライドさせます。勝手にスライドされるものよりも使い勝手は良いと思う。

綺麗な写真を大きく見せたい場合にかなり有効です。見た目もまずまずかと

サンプル

設置法

次のファイルをダウンロードして解凍してください。

js.zip(60KB)

解凍したら「js」というフォルダができると思います。その中のphotoというフォルダに写真なんかの画像を入れておきます。サイズの目安は横が600px〜800pxぐらいがちょうどいんじゃないかと。あんま大きすぎてもね・・・。
「greybox」フォルダはjavascriptなんかのファイルが入っているので、そっとしておきましょう・・・。
んでは画像を表示させるhtmlファイルに必要な記述をしましょう。

簡単に言うと、今解凍したものの中にjavascriptのファイルがあるので、htmlファイルにjavaのファイルはここにあるよと教えてあげる必要があります。

ではまず、htmlファイルのhead内に以下の記述をします。

<script type="text/javascript"> var GB_ROOT_DIR = "js/greybox/"; </script> <script type="text/javascript" src="js/greybox/AJS.js"></script> <script type="text/javascript" src="js/greybox/AJS_fx.js"></script> <script type="text/javascript" src="js/greybox/gb_scripts.js"></script> <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

ここで大事なのがファイルのパスです。src="js/greybox/AJS.js"　となってるところに注目してください。
これはいわゆる相対パスです。htmlファイルと同じディレクトリ（階層）にある場合の記述ですので、このまんま使うのであれば、htmlファイルと同じフォルダに先ほどのjsフォルダを入れる必要があります。

今度はbody内の記述です。

まずリンクに対してスライドショーを設定するので、（クリックでスライドショーが始まるので）、aタグを使って以下の記述をしてくんさい。

<a href="#" onclick="return GB_showImageSet(image_set, 1)">スライドショー</a>

これでスライドショーという文字をクリックするとスライドショーが始まります。

ここで仕上げ〜。以下の記述を今のリンクの下辺りにでも書いてください。どこでもたぶん問題ないです。

<script type="text/javascript"> var image_set = [ {'caption': 'ここの文字がタイトルとして表示される', 'url': 'ここに画像までの相対パスもしくは絶対パス。最後は当然〜.jpgとなる。'}, {'caption': 'ここの文字がタイトルとして表示される', 'url': '例）../photo/photo1.jpg'}, ]; </script>

画像のパスは相対パスで書きます。 js/greybox/AJS.jsファイルから見た相対パスです。デフォルトのままだと、階層を1つ上がりますので、 ../photo/〜.jpgとなるはずです。表示されない場合はたいがい相対パスの記述ミスです。 ../../などを試してみましょう。 絶対パスでも指定できますが、アップしてからじゃないと当然表示されません。絶対パスの場合はhttp〜からはじまって最後は.jpgで終わるはずです。

これで完了〜！あとはアップしてリンクをクリックすればおｋ！

うまくいかない場合はこのサイトのソースを見てちょ！
表示されない原因はどこかのパスの記述が間違っているはず！

ただこのサイト、euc-jpていう文字コードで書いてるからInternetExplorerで表示させちゃうと日本語部分が文字バケします・・・。
まぁ日本語部分は見なくてもいんだけど、気になる場合、FireFoxでソースを表示させるとちゃんと全部表示されます。参考までに・・・。

そんで結局おまえなに言ってんの？？って人には無理かもしれません・・・。今さらだけど（汗

そんなに難しくないのでやってみる価値はあると思う。

以上、javaを知らずにjavaを使う！でした〜っ！！