Dreamweaver CS3にも同梱されたSpryでは、JavaScriptが得意ではないデザイナーでも簡単に
複雑な効果を与えることが出来る、と言う触れ込みです。

例えばPhoto Gallery Demosもその一つで、なかなか見映えのする効果を比較的簡単に実現できているのですが、
いかんせん、デモのフォルダー構造が複雑なのと、写真ギャラリーに必要なHTML/CSSと、デモのデザイン (黒背景だったり) のHTML/CSSがごちゃごちゃになっていて、
一体どのファイルを使ってどう記述すれば良いのかわかりにくくなってしまっています。

そこで、上記デモのうちのStatic Photo Galleryから、Spryを使った写真ギャラリーを作るのに
本当に必要な物だけを抜き出して公開しておきます。Spryで写真ギャラリーを作る時は、
このファイルを元に作り始めると良いと思います。

動作例はこちらです。

まず、以下のファイルをダウンロードした上で、index.htmlをブラウザーで見てみてください。

SpryPhotoGallery.zipをダウンロード

Internet Explorerだと、セキュリティー保護に関する制限がでますが、許可してください。ギャラリーが表示されると思います。

では使い方について簡単に説明します。

まずimagesフォルダーの中に、あなたの写真ファイルを入れてください。
次に、index.htmlを編集して、imagesの中のファイルへのリンクを書き換えてください。aタグとimgタグと両方書き換えることにご注意ください。
SpryAssetsフォルダー内のファイルは写真ギャラリー効果に必要なので、そのままアップロードしてください。

使用しているcssファイルはindex.htmlを見ての通りです。内容を書き換えたい場合ですが、SpryAssetsの中のcssを書き換えても良いのですが、index.htmlからもう一つ別のファイルを読み込むようにして、そのファイルの中に記述を追加するようにした方が良いと思います。imagesフォルダ、SpryAssetsフォルダーの場所は、htmlからの参照先を変えれば、適当な場所に変えても問題ありません。

なお、Internet Explorerで、マウスオーバーした時の拡大画像が、右下側の画像の下側に回り込んでしまっていますが、これは元々のデモでもそのような動きになっていますので、了承ください。

ライセンスは、Spryのファイルを使っていることもあり、Spryと同じBSDですので、ご自由にお使いいただければ幸いです。

以上、先日のDreamweaverイベントレポートがAdobeに認められて法被をもらえることになった記念エントリーでした。

当日の発表資料も今月に入り続々と公開されていく予定なので楽しみです。