タグ: AJAX

LIGHTBOX2.0で、かっこよく画像をポップアップする！

LIGHTBOXというのはJAVASCRIPTで、要は画像のポップアップとかに使うわけだけども、クールなインターフェイスでなかなかカッコイイのですな。複数画像をグループ化して、フォトギャラリーみたいなスライドも出来る。

  1. 『ゼロからはじめるLightbox 2.0 – 簡単にWebで写真アルバム機能を
    http://journal.mycom.co.jp/articles/2007/06/14/lightbox/
    LIGHTBOXの概要と使い方が分かりやすくまとまっている。
  2. 『Lightboxスクリプトいろいろ』
    http://www.designwalker.com/2008/01/lightbox.html
    スクリプトサンプルとか。
  3. Ｌｉｇｈｔview
    http://www.nickstakenburg.com/projects/lightview/
    デザインが素敵なブランチ版
  4. 2.0をちょっと改造したひと。
    http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html

こういうのが、色々あると、WEBのデザインインターフェイスもたのしいですね。

MySqlのDBデータをエクセルのように書き換えるAjax＋PHP『DrasticGrid』

http://www.drasticdata.nl/DDDrasticGrid.php

データベース内の登録情報（例えば商品IDや価格など）をちょっと変更したいときに、ブラウザ上で、エクセルを編集するような操作で編集が出来るようにするツールコードです。

こちらのドラスティックシリーズ（？）には、GOOGLEMAPとのマッシュアップやタグ食らうどのツールもダウンロードできるようになっており、例えば、GOOGLEMAPで設定した位置情報に関するタグクラウドとDB情報を一緒に表示させて、その場で編集、などということも可能です。

詳しくは、サイト内のEXAMPLEを見ていただければ、なるほどな、と思っていただけるのではないでしょうか。

マウスオーバー、クリックでメニューが展開するアコーディオンUI色々

【その１】
NETTUTS – Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

AJAX＋CSSでメニューが縦に展開します。同一ウインドウでコンパクトにコンテンツを魅せたいときに。
デモあり。

【その２】
JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

こちらもAJAX＋CSSのアコーディオンメニューですが、横に展開します。＆うにゅーんとゴムを引っ張ったようなスムーススライドです。

【その３】
The CSS-Only Accordion Effect – CSSnewbie

こちらは、CSSのみで実装のアコーディオンUIです。解説も細かく（英語だけど）勉強にもなりますね。

【その他】

コンセプトは、同じですが、こんなに色々なデザインや動きがあるのね、ってくらい、色々あってどれも面白いです。