スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

商用利用可 軽量・単独で動作するスライドショーを実装するJavaScript『Animated JavaScript Slideshow』

Animated JavaScript Slideshow

Animated JavaScript Slideshow -- 5KB [Web Development Blog]

『Animated JavaScript Slideshow』はスライドショーを実装することが出来るJavaScriptライブラリです。スクリプト自体は約5KBと軽量で、単独で動作します。

つい最近、画像をスライドショーで表示させるものを作りたいと思っていて、使いやすそうなものを探していたところ、上記のJavaScriptライブラリが使いやすかったので紹介します。

動作デモ

とりあえずどのようなものかを見たい場合は、作者のページにデモページが用意されているのでそちらをどうぞ。

ファイル構成概要

ファイル構成

配布されているzipファイル(リンク先エントリーの下部にあり)には、JSファイルのほかにサンプルも一式で入っています。サンプルを参考にして、ある程度カスタマイズを行っていくことになります。サンプルのHTMLは最低限の記述のみなので、これを直接いじっていくのが楽です。

解凍すると、フォルダとファイルがいくつかあります。「thumbnails」にはサムネイル用の画像を入れ、「photos」フォルダには通常サイズの画像を入れます。

「compressed.js」と「script.js」は全く同じものです。名前から分かるとおり、「compressed.js」は圧縮して容量的な無駄がなくなったものなので、カスタマイズしたりJSファイル自体を読みたい場合以外はこれを使います。

「index.html」と「style.css」で使用する画像やページ全体のデザインを修正します。ユーザー側は主にこの2つをカスタマイズすることになります。

使い方

HTMLファイル中のulとli要素があるところで、使用する画像を指定します。

<h3>TinySlideshow v1</h3>
<span>photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna.</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>

span要素には通常サイズの画像のパスを指定します。上記例ならphotosフォルダの「orange-fish.jpg」を指定していることになります。「img src=~」という指定ではないので注意。

p要素の後にあるimg部分にはサムネイル画像を指定します。ここは普通に「img src=~」で可。

h3とp要素は画像の説明文を表示させる部分です(下記画像参照)。ここは日本語使用可能です。ちなみにh3やp要素をHTMLから部分的に削除してしまうと、スライドショーが正常に動作しませんので注意。表示させたくない場合は、CSSで「#information p {display:none;}」などと記述するといいでしょう。

説明文表示箇所

HTMLソース下部にあるJavaScriptの記述部分ではスライドショーの自動実行のオンオフや、サムネイル部分のスクロール速度などを変更できます。

slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");

「slideshow.auto」はtrue/falseでスライドショーの自動実行を切り替えます。初期はtrueで、falseにすると自動スライドショーは行われません。

「slideshow.speed」はスライドショーがオン(true)の場合の、画像が切り替わるまでの時間です。数値が小さいほど切り替わりが速くなります。「slideshow.auto」がfalseのときは数値に関係なく無効になります。

「slideshow.scrollSpeed」はサムネイル部分の左右の矢印をマウスオーバーしたときのサムネイルのスクロール速度です。数値が大きいと速くなります。画像の数が多い場合は数値を大きくしたほうがいらつきがいいかもしれません。

他にも項目がありますが、いじらなかったので省略。

あとは、サンプルのHTMLには最低限の記述しかないので、これに色々追記してページを作成していきます。CSSでは、幅や高さを調節して、スライドーショー部分を使用する画像サイズに合うようにしたり、ページ全体のデザインを整えれば完成となります。

対応ブラウザ

動作するブラウザはFirefox、Internet Explorer、Opera、Safari、Chromeとなっています。少なくとも自分の環境においては、Firefox3.0.11とIE6とIE8で動作確認できましたので、メジャーなブラウザは概ねカバーされていると思われます。

ライセンス

ライセンスは「Creative Commons - 表示 3.0 アメリカ合衆国」となっており、個人・商用を問わず利用可能ですが、著作者のクレジット表記が必要となります。

▼スポンサードリンク

Posted at 2009年07月21日 | 記事URL | JavaScript | Trackback(0) | Comment(0) | Top↑
1つ後の記事:【書評】ウェブデザイン見本帳 - 実例で学ぶWebのためのレイアウト基礎
1つ前の記事:THERMOSのケータイマグを購入して1ヶ月使ってみた感想














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/333-45333579
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。