前のMootoolsのプラグインImageDrawer1.0をリリースしました。で書きましたが、前のバージョンのGradually 1.0が汎用性がなくて新しく設計しなおしました。
今回は、画像の描画部分の実装をImageDrawer1.0で実装し、それ以外の機能をGraduallyに実装するようにしました。
これにより、利用方法が少しだけ柔軟になり、機能拡張が容易になった為、新しい機能も比較的に早く対応できそうです。
ダウンロード
http://mootools.net/forge/p/gradually
具体的な1.0からの変更点
1.0からの変更点は下記の通りです。
| No. | 変更点 |
|---|---|
| 1 | 別途ImageDrawerが必要になりました。 |
| 2 | AP仕様を大幅に変えました。 |
| 3 | Graduallyを利用するだけで独自のギャラリーを作成できるようにしました。 |
| 4 | ギャラリー機能を追加しました。 |
| 5 | IE6,7,8,9をサポート対象からはずしました。 |
スライドショー
1.0と同じスライドショーです。
ImageDrawer.Grid、ImageDrawer.Expandのインスタンスをオプションに引き渡すことで、画像を切り替える際の描画パターンを切り替えることができます。
MooShellの共有URL
http://mootools.net/shell/ZX4ay/15/
指定できるオプション
| オプションキー | データ型 | 説明 |
|---|---|---|
| drawer | object | ImageDrawerのインスタンス |
| images | array | 描画するイメージ要素 |
| zIndex | number | zIndexプロパティ、初期値は9000 |
| interval | number | 画像が切り替わるまでの間隔。ミリ秒単位 |
| titleClass | string | タイトルを表示する要素のclass名 |
| currentClass | string | 現在の画像の番号を表示する要素のclass名 |
| totalClass | string | 画像の数を表示する要素のclass名 |
| onPreload | function | すべての画像がプリロードされた時に発生します |
| onSelect | function | 画像が切り替わった際に発生します。第1引数は画像の番号、第2引数は画像パネルオブジェクトです |
| onDrawStart | function | 画像の描画処理を開始する前に発生します。第1引数は画像パネルオブジェクト、第2引数はImageDrawerインスタンスです |
| onDrawComplete | function | 画像の描画処理が終了した際に発生します。第1引数は画像パネルオブジェクト、第2引数はImageDrawerインスタンスです |
パネルオブジェクト
| プロパティ名 | データ型 | 説明 |
|---|---|---|
| width | number | 画像の横幅 |
| height | number | 画像の縦幅 |
| title | string | 画像のタイトル |
| alt | string | 画像の補足情報 |
| src | string | 画像のURL |
| image | element | img要素 |
| canvas | element | canvas要素 |
ギャラリー
2.0.0からの新機能です。画像の切り替えをサムネイル画像でできます。
又、ユーザーの操作にすばやく対応するために、描画処理の間に別のサムネイルがクリックされた場合、描画をキャンセルするようにしています。
こちらも又、ImageDrawer.Grid、ImageDrawer.Expandのインスタンスをオプションに引き渡すことで、画像を切り替える際の描画パターンを切り替えることができます。
MooShellの共有URL
http://mootools.net/shell/9S5Hb/13/
| オプションキー | データ型 | 説明 |
|---|---|---|
| drawer | object | ImageDrawerのインスタンス |
| images | array | 描画するイメージ要素 |
| zIndex | number | zIndexプロパティ、初期値は9000 |
| titleClass | string | タイトルを表示する要素のclass名 |
| currentClass | string | 現在の画像の番号を表示する要素のclass名 |
| totalClass | string | 画像の数を表示する要素のclass名 |
| controller | object | サムネイルコントローラーのオプション |
| onPreload | function | すべての画像がプリロードされた時に発生します |
| onSelect | function | 画像が切り替わった際に発生します。第1引数は画像の番号、第2引数は画像パネルオブジェクトです |
| onDrawStart | function | 画像の描画処理を開始する前に発生します。第1引数は画像パネルオブジェクト、第2引数はImageDrawerインスタンスです |
| onDrawComplete | function | 画像の描画処理が終了した際に発生します。第1引数は画像パネルオブジェクト、第2引数はImageDrawerインスタンスです |
サムネイルコントローラーのオプション
| オプションキー | データ型 | 説明 |
|---|---|---|
| defaultIndex | number | 初期選択する画像番号 |
| prepage | number | 表示するサムネイルの数、初期値は5 |
| controllerClass | string | コントローラの要素のclass名、初期値はgraduallyController |
| containerClass | string | サムネイルを格納する要素のclass名、初期値はgraduallyThumbnails |
| prevClass | string | 前へボタンの要素のclass名、初期値はprev |
| nextClass | string | 次へボタンの要素のclass名、初期値はnext |
| disableOpacity | number | 非アクティブの画像の透明度、初期値は0.4 |
最後にIEのサポートですが、できるだけ動作するようにしようと思います。
又、API仕様に少しだけ修正を入れるつもりです。
Related Post:
It is a list of related articles.
Trackback:
It is a comment that has been gotten before.
トラックバックを下記のURLに送ってください。
http://sharedhat.com/project/1088/trackback/
Reply:
Please give the comment to this article.