Smooth galleryを作ってみた。
今日から、1日1サンプル何か作るのを始めます。
では、1発目は、MooToolsというAjaxライブラリを使った、"Smooth gallery"というスライドショーを作ってみます。
Smooth galleryに必要なファイルはこちら、
JonDesign's Smooth Gallery
から、入手できます。
サンプル01
SmoothGalleryを実装して、用意した写真4枚を切り替えられるようにしました。
サンプル02
一定の時間が過ぎると、自動で写真が切り替わるようにしました。その際、サンプル01で表示されていたような、矢印やサムネイル画像一覧を表示しないようにしました。
サンプル03
サムネイル画像一覧を開くタブの部分の文字を日本語に変更しました。画像にも変更する事ができます。また、CSSを追加し、写真のタイトルと説明文のフォントサイズを変更しました。
サンプル04
ここまでは、ページを開くと同時に、スライドショーが表示されましたが、サンプル04では、ボタンを押すと、スライドショーが表示されるようにしました。
マイコミジャーナルの、
ゼロからはじめるSmoothGallery - 本格的スライドショー機能でパワーアップ
を参考に作っていきました。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)