レスポンシブに対応した写真を全面に見せるフォトギャラリーサイトを作成しました【御苗場vol.12横浜出展させていただきます】

ちょっと個人的な内容になってしまいますが、1/31（木）~2/3（日）まで、パシフィコ横浜で開催される「カメラと写真映像の情報発信イベントCP+（シーピープラス）」内の御苗場というアマチュアの人が自由に作品を掲載できるスペースにて、写真を出展させて頂くことになりました。

やっぱりメインはWebですので写真だけと思いまして、それに合わせてレスポンシブに対応した写真を全面に見せるフォトギャラリーサイトを作成いたしましたので紹介させてください。

イベント情報

パシフィコ横浜　CP+（シーピープラス）
2013年1月31日(木)～2月3日(日) 10:00～17:00 （初日12:00～/最終日16:00まで）

●CP+（シーピープラス）
http://www.cpplus.jp/

●御苗場vol.12 横浜
http://www.onaeba.com/

開催期間中は毎日セミナーみたりして会場におりますので、カメラ見に来るなどでCP+にいらっしゃる方でちょっと見てやろうと思う人がおりましたら是非御苗場ブースに足をお運びください。

また御苗場に出展している人いましたら是非現地で会いましょう！

入場料は1000円ですが、事前登録で無料になります！

No.068　ハヤシユタカ
http://cruzin.jp/

グループ展をやっている人やフォトサークルなどやっている人や写真関連のWebサイトを作成しようなどいましたが気軽に話しかけてくれると嬉しいです。

またWebサイトや写真ブログなどを作ってみたい写真家の方など是非お友達になってください。

会期中はだいたい毎日こんな格好でいる予定です・・
青いアークテリクスのシャカシャカ着てます（笑）

特設サイト作成

それにあわせて特設サイトを作成いたしました。

The Zoological Garden ～言葉のない対話～
http://www.html5-memo.com/zoological/

パソコンでの閲覧のスクリーンショット

今回作成したサイトの特徴

• 写真をウインドウにあわせて高さ100%になるようにリサイズ
• プロフィールにはjQueryのプラグイン「fancybox」を使用

またメディアクエリにてスマートフォンや7インチタブレットでも見れるようにしてみました。

iphone（縦）での閲覧のスクリーンショット

iphone（横）での閲覧のスクリーンショット

nexus7（縦）での閲覧のスクリーンショット

nexus7（横）での閲覧のスクリーンショット

iPad（縦）での閲覧のスクリーンショット

iPad（横）での閲覧のスクリーンショット

今回はスマホサイトでのフリックには対応しておりませんので左右のボタンとオート再生のみになっておりますが、今後フリックの対応もしてみたいと思います。

見ていると多少挙動が？って思う部分があるかと思いますが、レスポンシブWebは機種の多さから完璧に作成するのは難しいですね・・・。

今回作成したサイトは雑誌WebDesigingにて連載させて頂いてるjQuery Lab.での内容をカスタマイズして作成してみました。

写真をウインドウにあわせて高さ100%になるようにリサイズ

の第一回目の「メインビジュアル用のスライダーを実装する」にて作成したサンプルをカスタマイズして作成いたしました。

サンプルサイト

http://www.html5-memo.com/sample/jq01/

写真の前後の表示とアニメーション、ボタンでの操作などこちらが参考になります。

ソースの細かい解説はこちら

すぐに使える！jQueryを使用してウインドウ幅一杯にメインビジュアル用のスライダーの実装工程を学ぶ！
http://www.html5-memo.com/jquerylab/jquery2012-12/

サンプルデータはWebDesigingのサイトからダウンロードできます。

http://book.mycom.co.jp/wd/2012/12.html

プロフィールにはjQueryのプラグイン「fancybox」を使用

こちらもjQuery Lab.の第2回の「レスポンシブ対応のモーダルウインドウ」を使用しました。

サンプルサイト

http://www.html5-memo.com/sample/jq02/fancybox
fancyboxの基本のサンプルです。

http://www.html5-memo.com/sample/jq02/fresco/
こちらはもうひとつのレスポンシブに対応した「fresco」のサンプルです。

http://www.html5-memo.com/sample/jq02/fancyboxhtml/
こちらはコンテンツに別のhtmlを読み込むサンプルです。

今回はこちらのサンプルを使用しました。

サンプルデータはWebDesigingのサイトからダウンロードできます。

http://book.mycom.co.jp/wd/2013/01.html

Webサイトや写真ブログだけですとモニタだけを考えてだけでよいのですが、今回印刷まですることでよりシビアに写真を撮らなければいけないので大変でしたが、よい経験になりました。

まだまだWebも写真も勉強していかないとですね。

当日会場でお待ちしております。

パシフィコ横浜　CP+（シーピープラス）
2013年1月31日(木)～2月3日(日) 10:00～17:00 （初日12:00～/最終日16:00まで）

●CP+（シーピープラス）
http://www.cpplus.jp/

●御苗場vol.12 横浜
http://www.onaeba.com/