このページの本文へ

Flickr風スライドショーをJavaScriptで再現 (2/5)

2008年11月10日 11時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

jQuery

[1] 「jQuery」のトップページ。右上の「Download(jQuery )」からダウンロードページへ

jQuery

[2] 「jquery-1.2.6.min.js」のリンク文字をクリックします

jQuery

[3] ファイル名は「jquery-1.2.6.min.js」で保存します

jQuery

[4] Photo Sliderのトップページ(デモページも兼用)。「photoslider.js」のリンク文字をクリックします

jQuery

[5] jQueryライブラリファイルと同じ場所に保存します

jQuery

[6] 「photoslider.css」のリンク文字の上で右ボタンをクリックしメニューから「対象をファイルに保存...」を選択します

jQuery

[7] cssフォルダ内に保存します

高機能な「Photo Slider」を利用する


 Ajaxの登場以降、さまざまな方法で画像を見せるライブラリが登場しています。写真を効果的に表示するライブラリとしては「Lightbox 2」が有名ですが、ここではより高機能でFlickrのスライドショー機能にイメージ的に近い「Photo Slider」というライブラリを使用します。

 実は、スライドショー機能を実現するライブラリには、ユーザーが再生/停止ボタンを押すことで動作するタイプが多く、今回実装しようとしているスライドショーのように、自動で再生が始まるようにできるものは多くありません。Photo Sliderなら、スライドショーを自動再生するか否かといった指定や、カスタムナビゲーションを扱えます。

 ではさっそく、ライブラリのダウンロードから始めましょう。Photo Sliderは、これまでにも何度か使用してきた「jQuery」上で動作するライブラリですので、先に以下のURLからjQueryをダウンロードします(2008年11月時点でのバージョンは1.2.6)。

http://jquery.com/

 「Download( jQuery );」と書かれているボタンをクリックすると、ダウンロード先のページに移動します [1]。「jquery-1.2.6.min.js」のリンク文字をクリックします [2]。IEの場合はダイアログが表示されるので「保存」ボタンをクリックして、適当な場所に保存します。保存するファイル名は「jquery-1.2.6.min.js」にしてください [3]


 次にPhoto Sliderをダウンロードします。Photo Sliderのスクリプトファイルとスタイルシートは以下のURLからダウンロードします。

http://opiefoto.com/articles/photoslider

 「Requirements」にある「photoslider.js」のリンク文字をクリックします [4]。先ほどと同様、IEの場合は保存ボタンをクリック、FirefoxやSafariではリンク文字の上で右ボタンをクリックし「リンク先のファイルを別名で保存...」を選択します [5]

 次にPhoto Sliderで使うスタイルシートファイルをダウンロードします。photoslider.jsと同じ、Requirementsにある「photoslider.css」のリンク文字の上で右ボタンをクリックします。IEの場合は「対象をファイルに保存...」を選択、FirefoxやSafariは「リンク先のファイルを別名で保存...」を選択しましょう [6]。ファイル名は「photoslider.css」のままにしておきます [7]

 これでライブラリの準備が完了しました。今回の作例サイトは、以下のようなスクリプトファイル/スタイルシートファイル/HTMLファイルの構成になっています。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く