サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示させる＜Ajax｜Lightbox＞
Lightboxは、 サムネイル画像をクリックするとJavascript(Ajax)を利用して同じページに、拡大画像をオーバーレイ表示します。 Lightboxは、「１枚の画像」または「複数画像のグループ」を表示する２つの方法があります。だだし、スライドショー、大きな画像を画面に合わせて表示や画像を別ウィンドーに表示などができません。 これらを望むには、Piroboxを薦めます。 サンプル １枚の画像 複数画像のグループ 【Lightbox設置例（本ページ）】 []：フォルダ |---[images] 表示画像用フォルダ（自分で用意） | |---[w640] | | |---P4280326.jpg | | |---P5100370.jpg など（Width=640 表示画像） | |---[lightbox] | |---[css] | |---lightbox.css | |--
Lightbox | Like@Lunatic
Lightbox系スクリプトの情報が一覧表になっているThe Lightbox Clones Matrixという素晴らしいサイトがあります。ここから一通り見て回って、自分なりに使えそうなものをピックアップしてみました。ほとんど勢いでまとめたものなので、情報としての正確性は低いかもしれませんが、ご容赦を。半分は自分用ってノリです。 自分はLightbox系のスクリプトを選ぶ時、そのサイトに予め組み込まれている（組み込む予定の）JSライブラリで使えるかどうかを基準に選ぶことが多いです。なので、必要とするJSライブラリ別にカテゴライズして並べています。 Highslide JS 必要ライブラリ： – 対応形式： 画像、画像ギャラリー、インライン、インラインフレーム、Ajax、Flash 対象指定： class属性＆onclick属性 ライセンス： CCライセンス 表示-非営利 2.5 一般 非商
ColorMe!ShopProでLightboxを使う
カッコイイ写真表示の代名詞といったらLightbox系のAjaxライブラリですけど、 ColorMe!ShopProはヘッダが操作出来ないので、Usage通り<script>をヘッダに入れて～ということは出来ない。 なので一見使用不可能に見えるけど、結構あっさり使えます。 ポイントは３つ。 ヘッダに挿入するJavascriptファイルへのリンクは、Body内に記述する。 スタイルシートは使用するページのテンプレートCSSにコピペする（上級者モード） テンプレートのアンカータグにrel属性入れる 一番大きなポイントはCSS。 外部ファイルにしたCSSはヘッダにリンク入れないと反映されないので、scriptと同様にbody直下にリンクしても使えない。 ColorMe!ShopProはヘッダの操作が出来ないものの、テンプレートの各ページ（商品詳細画面やカテゴリ画面）ごとに使用するＣＳＳをテキスト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lightbox.jsをaタグ以外で使う - e-learningやってる社長のブログ
