ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
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
IE6ではselect要素にz-indexが定義されていない - F.Ko-Jiの「一秒後は未来」
IE6(おそらくIE6以前)では、select要素にCSSのz-indexが定義されていません。z-indexというのはレイヤーの重なりの順番です。 そのため、select要素のある画面にdiv要素でレイヤーを被せようとすると、IE6ではレイヤーの上にselect要素だけ残って表示されてしまいます。 これを防ぐためには、レイヤーをiframe(インラインフレーム)にするか、レイヤーを表示するときにJavaScriptを使ってselect要素を visibility:hidden にする必要があります。 var elems = document.getElementsByTagName("select"); for (i = 0; i < elems.length; i++) { elems[i].style.visibility = "hidden"; } もしくは、 /* CSS */
様々なjQueryで動作するライトボックスを集めた「31 mind blowing collection of jQuery light box」
TOP > WebDesign > 様々なjQueryで動作するライトボックスを集めた「31 mind blowing collection of jQuery light box」 javascriptを使って、画面にオーバーレイしてコンテンツを表示させるライトボックス。現在のWEBページでは一般的な表現方法の一つで、数多くのサイトで公開されていますが、今回紹介するのは様々なライトボックスなjQueryプラグインをあつめたエントリー「31 mind blowing collection of jQuery light box」です。 Milkbox どれも基本的な機能は同一のものになりますが、それぞれで少し特徴があるものもあります。今日はまとめられているライトボックスの中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■PrettyPhoto 角アールな表現が可
アップデートしたLightviewが素晴らしい | ユージック
アップデートしたLightviewが素晴らしい 2008年2月20日 様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。 Lightview：www.nickstakenburg.com 扱えるファイル 画像 動画(Quicktime) FLASH(swf) AJAX iframe HTML(inline content) このように非常にシンプルなUIで様々なメディアを扱えます。 準備と使い方 スクリプトファイルをこちらからDLします。 続いてヘッダーにスクリプトを読み込む <link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'><
cabel.name: FancyZoom 1.1
Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility! ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done! Smooth Javasc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LightBoxの使い方とカスタマイズ方法 | CSS Lecture
Lightboxスクリプトいろいろ - DesignWalker