２０１１年度の前期から参加しているNHK文化センターの写真教室「楽しく撮れるポートレート」で私が撮影した作品を整理、公開するためのサイトをオープンし、2012年度分の画像をまずは掲載しました。いただいた講師の先生のコメントも付記しました。
http://photo789.web.fc2.com/nhk/
さて、サイトオープンに向けて苦労したのは、クロスフェード（写真から次の写真へゆっくり表示が切り替わる動作）を行うスライドショーの組み込みです。
よく、クロスフェードによる画像切り替えは、Adobeフラッシュのコンテンツとして制作されますが、以下の理由で、フラッシュを使わない方法を模索しました。
１）フラッシュコンテンツは、iPadやiPhoneの標準ブラウザsafariでは表示されない。
２）画像の追加や順番の入れ替えをしたい場合、コンテンツの作り直しとなる。
３）無料の互換ソフトもあるようだが、そもそもフラッシュの制作ソフトを持っていない。
ブラウザで動くスクリプトといえば、JavaScriptですが、これまで、サムネールから拡大画像を呼び出す手法として、関数を作っては（いろいろアレンジしながら）使ってきました。このJavaScriptでなんとかクロスフェードができないか、調べてみたらありました。以下は参考にした記事です。
http://exyz.cocolog-nifty.com/good_sleep/2009/02/javascript-0798.html
記事にあるように、Brand Spanking New サイトから Crossfader.js をダウンロードし、DIVで区切った画像を指定すれば、動いてくれました。特別なプラグインも入りません。
ただ、スライドショーを行うHTMLでこのスクリプトを読み込む手続きを入れての動作はローカルではOKでしたが、無料ウェブ FC2のサイトに上げるとうまく動きませんでした。FC2からスクリプトを読み込む時、何かよけいな文を追加してダウンロードするためと思われます。やむなく、スライドショーを行うHTML内にCrossFader.jsのスクリプトをそのまま記述してしまいました。
今回の習作集サイトでは、このスライドショーHTMLをインラインフレームでページ中央に配置して表示させています。何かの参考になれば幸いです。
http://photo789.web.fc2.com/nhk/
さて、サイトオープンに向けて苦労したのは、クロスフェード（写真から次の写真へゆっくり表示が切り替わる動作）を行うスライドショーの組み込みです。
よく、クロスフェードによる画像切り替えは、Adobeフラッシュのコンテンツとして制作されますが、以下の理由で、フラッシュを使わない方法を模索しました。
１）フラッシュコンテンツは、iPadやiPhoneの標準ブラウザsafariでは表示されない。
２）画像の追加や順番の入れ替えをしたい場合、コンテンツの作り直しとなる。
３）無料の互換ソフトもあるようだが、そもそもフラッシュの制作ソフトを持っていない。
ブラウザで動くスクリプトといえば、JavaScriptですが、これまで、サムネールから拡大画像を呼び出す手法として、関数を作っては（いろいろアレンジしながら）使ってきました。このJavaScriptでなんとかクロスフェードができないか、調べてみたらありました。以下は参考にした記事です。
http://exyz.cocolog-nifty.com/good_sleep/2009/02/javascript-0798.html
記事にあるように、Brand Spanking New サイトから Crossfader.js をダウンロードし、DIVで区切った画像を指定すれば、動いてくれました。特別なプラグインも入りません。
ただ、スライドショーを行うHTMLでこのスクリプトを読み込む手続きを入れての動作はローカルではOKでしたが、無料ウェブ FC2のサイトに上げるとうまく動きませんでした。FC2からスクリプトを読み込む時、何かよけいな文を追加してダウンロードするためと思われます。やむなく、スライドショーを行うHTML内にCrossFader.jsのスクリプトをそのまま記述してしまいました。
今回の習作集サイトでは、このスライドショーHTMLをインラインフレームでページ中央に配置して表示させています。何かの参考になれば幸いです。