本当にそのまま使えるSpry写真ギャラリーサンプル
Dreamweaver CS3にも同梱されたSpryでは、JavaScriptが得意ではないデザイナーでも簡単に
複雑な効果を与えることが出来る、と言う触れ込みです。
例えばPhoto Gallery Demosもその一つで、なかなか見映えのする効果を比較的簡単に実現できているのですが、
いかんせん、デモのフォルダー構造が複雑なのと、写真ギャラリーに必要なHTML/CSSと、デモのデザイン (黒背景だったり) のHTML/CSSがごちゃごちゃになっていて、
一体どのファイルを使ってどう記述すれば良いのかわかりにくくなってしまっています。
そこで、上記デモのうちのStatic Photo Galleryから、Spryを使った写真ギャラリーを作るのに
本当に必要な物だけを抜き出して公開しておきます。Spryで写真ギャラリーを作る時は、
このファイルを元に作り始めると良いと思います。
動作例はこちらです。
まず、以下のファイルをダウンロードした上で、index.htmlをブラウザーで見てみてください。
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に認められて法被をもらえることになった記念エントリーでした。
当日の発表資料も今月に入り続々と公開されていく予定なので楽しみです。

お願い!
どこにどう書けばいいのか分らずココに書かせて頂きます。
このspry写真ギャラリーを使わせて頂いております。
とても助かりました。
で、当方の写真枚数が多いのでデータを全て読み込んでからページを表示させたいのです。
いろいろ試してみたのですが、どれもうまくいきません。
ソースにどう記述すればいいのでしょうか?
何故そんなことを? と、思われるかもしれませんが、全てDLが完了する前に、写真をクリックすると写真表示が左上に1枚になるので、それを回避したいのです。
因みにこのページを、インラインフレームで読み込んで使用していおります。
http://a-s-c.jp/e-photo.html
当方、40歳を過ぎてからHP制作をやり始めてまだ間もないので知識が・・・
お忙しいとは思いますが、ご教授して頂ければ幸いです。
宜しくお願い致します。
試していませんが
すべての画像の読み込みが終わるまでにクリックされると切り替わってしまうんですね。
読み込み完了時に#controlsまたは#pictureのdisplayをblockにする処理が入っているようです。
画像の部分全体をなどで括った上で、cssでdisplay:none;にしておいてはいかがでしょうか。