jQueryを使ってみた

制作担当をしている「清水北山好会のホームページ」にj Queryを使ったスライドショーを付けてみた。(右)

事の発端は「山好会」HP担当になり会の山行記録をホームページに掲載することになった。
しかし、会が発足したばかりと言うこともあるが、会の行事としての登山計画はないままに、会員各自が独自にいろいろな山に登って、それを各自のブログに紹介していた。
例会ではそれを報告したり紹介したりする程度だったため、HPに会として掲載する内容がないので、会員各自の山行記録を紹介して「詳しい内容はこちらのブログをご覧ください」という感じのホームページにならざるを得なかった。
記事は各自のブログの頭の部分をコピーし、画像はブログから1枚ダウンロードし、紹介文の冒頭に貼り付けた。
このブログの冒頭部分をつまみ食いしただけのホームページでは、あまりにも芸がないので、このホームページでお馴染みのルート図を「GoogleMap」と「電子国土Map」のオンライン地図上に表示することにした。(右)

しかし、これでは自分のブログを持っていない会員や、GPSを持っていない会員にとっては、ほとんど内容のないHPになってしまうことになる。
そこで画像で見せるページ作りが必要になったが、画像を普通に見せたのでは、各自のブログが既にある場合は、重複するだけで意味がない。
何か別の表示法をしなければならない。 
そこで、ネットを検索したら次の4項目が良さそうに思えた。
1.JavaScriptで自動的に替わるスライドショー (http://allabout.co.jp/gm/gc/23931/)
2.j Query ギャラリープラグインGalleria (http://allabout.co.jp/gm/gc/24178/)
3.Flickr風スライドショーをJavaScriptで再現 (http://ascii.jp/elem/000/000/187/187279/)
4.別窓を開かずに、その場で拡大画像を表示! (http://allabout.co.jp/gm/gc/23975/)

ここで、4番はこのホームページで既に使用している「Lightbox Plus」というもので、任意のサムネイルをクリックして拡大画像を表示するもの。
2番も同じような動作をする。
1番と3番は共に自動チェンジするスライドだが、3番は自動チェンジでありながら、サムネイルをクリックすることで、任意の画像へスタート位置を変更できる点が優れている。

と、いうことで、3番と4番の両方を採用することにし、オートとマニュアルを閲覧者が任意に選択できる仕様にした。
j Query を使うのは初めてで、それが一体どんなものなのかさっぱり理解していなかったが、上記の紹介文を読んでみると、この j Queryを使うことで、自分でJava Script を記述する必要がなくなり、既にライブラリーとして用意されているものをダウンロードして利用するだけという簡単なものらしい。

HTMLに追加するソースを見ても、Script らしい部分は殆どない。
サムネイル画像とメイン画像のファイル名が並んでいるだけで、実に簡単!!
ただ今回採用した「Flickr風」のスライドは、その名の通り「Flickr」と良く似た動作はするが、「Flickr」と同じ動作ではない。
個人的には「Flickr」の方が好きだ。
Flickr のスライドショー (Interesting photo from the last 7days)

「Flickr」は、サムネイルが自己主張しない点が優れている。
マウスポインターを遠ざけるとサムネイルは消える。また、サムネイルに変な動きが与えられておらず、静かに「今ここを再生しています」的な表示になっている。
「Flickr風」の方は、サムネイルがやたらと自己主張して、動きが派手すぎる。サムネイルは主役ではなく、脇役か黒子だから目立つ必要はないと思う。むしろ目立っては目障りであり邪魔でさえあると思う。

データ
  • 2011.10.17(月)
アーカイブ

現在位置: ホームなんでも日記メニュー > このページ