Java Script(JQuery)で画像ビューアを10個作ってみました
Java Script及びJQueryの勉強のために画像ビューアを作ってみました。
使用しましたJQueryのバージョンは1.4.2です。
画像ビューアは全部で10個、せっかくなので掲載します。
だいたいコードが短めなもの〜長めなものの順番です。まあ、長いといってもJavaScript数十行ですけれどね。
どれも基本的な見た目はほぼ同様です。
左側に選択項目を並べて、選択項目をクリックすると右側に画像を表示するオーソドックスなタイプの画像ビューアとなっています。
JavaScriptのコードをいじらなくても画像の追加が可能なように留意しました。
画像の追加、削除はaタグの増減だけで行われます。
また、カスタマイズ前提のため、装飾はほぼしていません。
余計な装飾が入っているとコードが読みづらいかと思いますので。
xhtmlとcssの知識が少しでもあればカスタマイズすることは容易だと思います。
コードについてはどうぞご自由にお使い下さいませ(もちろんjQueryのライセンスはjQueryのものですからね)。
カスタマイズの注意点等についてはダウンロードしたファイルの中に含まれるreadme.txtをご参照下さい。
たとえば、左側の一覧が画像のものについて、縦一列に並べるのではなく、左上から右下へ順番に並べたい場合もあるかと思います。
下記のように。
その場合はcssファイルにて#imagelist.liにfloat:leftとpadding-rightを適切な値に指定してください。
#imagelist li{
list-style:none;
float:left;
padding-right:5px;
}
といった具合です。
ただし、選択項目画像のサイズが一定ではない場合、これだけだとレイアウト崩れますのでご注意下さい。
この辺りについてもreadme.txtに記述してあります。
注意点1
ダウンロード一式の中には画像ファイル含んでおりません。
画像ファイルはこちらからダウンロードして、解凍の上、imageフォルダをhtmlと同階層においてください。
注意点2
本素材については画像のロード待ちについては考慮していません。
そのため、各画像を最初に表示するときはアニメーションが思った通りにいかないこともあるかと思います。
ロード待ちを加えなかった理由はコードをあまり複雑にしたくなかったのと、アニメーションのために画像ロードを待たせることがユーザ視点でいいこととは思えなかったためです。
もしも画像ロードを待たせたい際には、スタイルシートにてdisplay:noneを指定したブロック内にて全画像の表示を行う処理を組み込む等してください。
JavaScriptの処理はドキュメントの読み込み完了を待っているため、画像のロードが完了するまではJavaScriptが処理しません。
(ただし、JavaScriptが処理開始するまでは選択項目をクリックした際に画像が直接ブラウザで表示されます)
01.基本形
左側に項目一覧、右側に画像表示で切替のアニメーションはありません。
項目一覧のaタグのhref要素が表示する画像のURL、title要素が画像の下に表示されるテキストです。
リンクを貼る項目名は表示される画像のaltに指定されます。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
02.リストの画像化
01の左側の項目一覧を画像としたものです。
01と異なり、項目一覧の画像のaltで指定した値が表示される画像のaltとなります。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
03.XMLにて指定した情報の取得
02の機能追加版です。
XMLより取得したhtmlコードを画像の下に表示します。
XMLの記述例です。
1つ目のimgtextタグ内が項目一覧の1つ目の画像、2つ目のimgtextタグ内が項目一覧の2つ目の画像……という風に順番に対応します。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
04.画像先読み
03の機能追加版です。
見た目はまったく同じです。
03に画像の先読み機能を追加してみました。
01〜03は選択項目をクリックした時点で初めて画像ロードを行いますが、こちらは画像を内部的に先読みします。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
05.画像切替のフェードイン・アウト
04の機能追加版です。
右側の画像切替を旧画像のフェードイン、新画像のフェードアウトにて行います。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
06.画像切替のスライドダウン
04の機能追加版です。
右側の画像切替を新画像のスライドダウンにて行います。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
07.画像切替のスライドイン
04の機能追加版です。
スライドインという名称でいいのでしょうか?
06は上から表示でしたが07は左から表示です。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
08. 画像切替のホワイトアウト
04の機能追加版です。
画像の切替をホワイトアウト、ホワイトインにて行います。
これもアニメーションの正式名称か微妙ですが。
画像がいったん真っ白になって、真っ白から戻るときには他の画像に切り替っているというやつです。
スタイルシートで色コードを指定しているだけですので、それを変えれば白以外でも可能です。
この素材のみ、白くなっていることの確認のために背景色黒、文字色白にしてあります。
また、アニメーション切替の性質上、全画像同一サイズであることを前提としています。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
09.画像切替の横スクロール
03の機能追加版です。
画像の切替を横スクロールにて行います。
画像が10枚の場合、横にその10枚の画像を並べて、クリックした項目に応じてスクロールさせます。
画像を表示するdivの横幅に合わせて画像配置するため、画像の横サイズが統一されていなくても正常動作します。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。
10.画像切替の縦スクロール
03の機能追加版です。
画像の切替を縦スクロールにて行います。
画像が10枚の場合、縦にその10枚の画像を並べて、クリックした項目に応じてスクロールさせます。
画像を表示するdivの横幅に合わせて画像配置するため、画像の縦サイズが統一されていなくても正常動作します。
サンプルを見る。
JavaScriptのコードを見る。
一式をダウンロードする。