jQueryによるLightbox風モーダルウィンドウの作り方 (1/3)
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
Blogger de Lightbox
Betaの頃は普通に使えたLightbox。 Betaがとれてから、しばらくして使えなくなったLightbox。直リン画像なら使えたんだけど、その作業が面倒くさいからずっと放置してました。最近、ParsonalなBlogを作っていて、どうしてもLightbox系を入れたくて奮闘してたら使えたので、メモ。 Bloggerを使ってる人は、Google Page Creatorを使ってる人も多いと思う。自分もその1人。だけど、Google Page Creatorは不便な事にフォルダのアップロードができない。だから、まずはDownloadしてきた「.js」ファイルの中の画像へのパスを書き直してやる必要がある。ここまでの順序としては 1.Lightbox系のファイルをDownloadする 2.必要なパーツ画像をアップロードする 3.「.js」ファイル内のパーツ画像へのパスを書き直す 4.「.js」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
