CSS3を使ってビジュアルエフェクトを加えたギャラリーを作る
現在やってるスクラップや、フォトブックなどをまとめてギャラリーページを作りたいと思って、ギャラリースクリプトを探していたのですが、Smashingmagazineの『Using CSS3 Visual Effects』で紹介されていたポラロイド風のエフェクトを使ったものに一目ぼれ。
Polaroids with CSS3
Polaroids with CSS3
画像の傾きやボックスシャドウはCSS3での設定によるもので、マウスオーバーでポップアップもします。『Easily Turn Your Images Into Polaroids with CSS3』で公開されているソースをもとに作ったページがこれ
Nutspress gallery
Nutspress gallery
CSS3でここまでエフェクトかけられることに驚き！ただ、対応ブラウザが限られているのが玉にきず。Firefox、Chrome、Safali などは最新バージョンで表示が可能ですが、IEとOperaでは画像が普通に並んでいるだけになります。画像の傾きやポップアップ、ボックスシャドウに対応しているブラウザでのみ動きが確認出来ます。
Demoサイトでは画像のリンク先はFlickrになっているので、ここの部分を変更。以前に見つけていたEditable CSS3 Photo Galleryのようなfancyzoom.jsを使ったポップアップがええかなと思い、FancyZoom meet jQueryを組み合わせてみたんですが、ポップアップしている画像の後ろの画像にマウスオーバーしたとたん、画像の上下がおかしくなったり、ポップアップで呼び出す画像をid付けてページ内にあらかじめ呼び出しておく必要があったりして却下。
Wordpressに既存で使われているThickboxだと簡単に設定できるが、ポップアップのときの動きが少し物足りない。。。最終的にprettyPhoto.jsを取り入れることにしました。prettyPhoto.jsはエフェクト時のデザインをデフォルトで5種類から選べるようになっているので、サイトのデザインに合わせることができます。もちろん、オリジナルのデザインを入れることも出来ますね。
デザイン変更準備中なので、このページではとくにデザインを入れていません。…うう、早くテーマ変更したくなってきた。でも、、、サーバーの仕様上で出来ることと出来ないことの切り分けがどうしても必要になってきたので、現在問い合わせ中。
Leave a Reply