jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
スライドショー付きLightBox風イメージアルバムのサンプル:phpspot開発日誌
Dynamic Image Gallery and Slideshow - Web Development Blog This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. スライドショー付きLightBox風イメージアルバムのサンプル。 次のようなＵＩを持つイメージアルバム実装用のコードサンプルが公開されてます。 デモページを開いてみる ページ送りする際もフェードイン/アウトしてクールになってます。 自動ページ送り機能もあってなかなかいいです。 関連エントリ 気持ちよいスライド機能を提供する「noobSlide」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画
複数のライブラリに対応したLightboxスクリプト -Shadowbox.js
Shadowbox.jsは、Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトです。 Shadowbox.js Media Viewer デモ ダウンロード Shadowbox.jsは複数のライブラリに対応しているというだけでもすごいですが、画像や動画の拡大表示にもさまざまなオプションがあり、多数あるLightbox風スクリプトの中でも充実した機能を持っていると思います。 下記に主な特徴を挙げます。 拡大する際のコードは、簡易です。 <a href="image.jpg" rel="shadowbox">Image</a> 併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。 jQuery Prototype + Scriptaculous YUI Ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lightboxスクリプトいろいろ - DesignWalker
