最近ではサイト上でギャラリー的な表現をする場合、
Flashで動きを付けてきれいに見せるやり方はよく見かけますが、
Flashを使わずに何か出来ないか実験的に試してみました。

jQueryでの表示を動的に切り替える(ソートさせる)プラグインに加え、
最近お気に入りのFancyBoxと組み合わせることで下記の様な見せ方が。

サンプルはうちのサイトの「実績紹介」。
Ajaxギャラリー風にすると…

上部にある年数をクリックすることでその年のもの以外は非表示に切り替えソートされます。

各サムネイル画像はクリック後、拡大表示します。
表示された拡大画像上にマウスカーソルを持っていくことで
「←」「→」の遷移を表示して、グルーピングしてある纏まり(年毎)を辿ることが可能。

動きの重さもさほど感じないので不自由さはないかな、と。

上のサンプルページでは一覧「All」が上から、
2009年物 → 2008年物 → 2007年物 → …
と規則正しく並んでいますが、その基準をごちゃ混ぜにすると以下の様な見え方になったりします。

ソートしている感覚がこっちの方が動きがあっていい感じです。

どちらも拡大画面を表示した後、
下に位置するサムネイルリスト部分を触ると、
拡大画面が残ったままだったりしますが…

まだβ版なのでもっとつめていきたいと思います。。。

ご意見など承り中です。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

JavaScriptのみでのギャラリーの見せ方

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner