JavaScript-Slideshow を使う。(8)

スクリプトはこちら
[Slideshow]
http://www.electricprism.com/aeron/slideshow/

使い方がある程度わかってきたので、最後にやっと
JavaScriptのソース解析(・・・コメント解析)を行いました。
そこでわかった新事実をメモしておきます。

◆デフォルト設定
各プロパティのデフォルト設定について。

[img:]
これは当たり前ですが必須。imgがない場合や該当画像を見つけられなかった場合
スクリプトが実行されません。(スクリプトエラーとはならない)
[hu:]
指定しない場合webページと同じディレクトリに写真を探しに行きます。
なので、それぞれの写真のディレクトリが異なる場合、”と書いておき、
img:側にフルパスを記述することになります。
[heightとwidth:]
指定しない場合1番はじめの画像の元サイズで表示されます。
[type:]
指定しない場合fadeになります。
[duration:]
任意です。デフォルトの表示時間ははっきりわかりませんでした。
[zoom:/pan:]
デフォルトははっきりわかりませんでした。
[transition:]
オプション設定です。
[navigation:]
オプション設定です。
[captions:]
オプション設定です。

◆その他プロパティ
他にこのようなプロパティがありました。
指定しなくても問題なく動きますが、実際にサイトに取り入れようとした場合に
使う必要が出てくる場合があるかもしれません。
英語コメントの解読に若干不安はありますが、
全てのプロパティについて動作確認は行いました。

[classes:]
配列(要素3)で指定します。
ナビゲーションとして表示されるブロック要素のクラス名を指定できます。
[(prevの別名), (nextの別名) , (activeの別名)]の順で設定します。

// ex )
classes:['pre' , 'nx' , 'act' ] // CSSに指定するclass名の変更

[thumbnailre:]
サムネイルとして指定する画像名を変更することができます。
javascriptのreplaceを使い、サムネイルの画像名を決めているようなのですが、
その引数を変更することが可能です。
配列(要素2)で指定します。
[(置換対象となる文字),(置換する文字列)]と指定します。
デフォルトでは
[/¥./, ‘t.’]
と指定されています。そのため[画像名+t].xxxでサムネイル画像が表示されることになります。

// ex )
thumbnailre: [/¥./, 'mini.' ] // [画像名+mini].xxxとなる

[resize:]
true or falseで設定します。デフォルトはtrueです。
表示サイズに合わせて画像サイズを変更するかどうかを設定します。
type:zoom/comboの場合この設定はfalseにしていても、
JavaScriptが実行されると自動的にサイズは調整されます。

Slideshow、使ってみると、いろんな設定ができておもしろかったです。
次はどんなJavaScriptを使おうかな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください