スマートフォン用の表示で見る

LightBox

ウェブ

Lightbox

らいとぼっくす

Lightbox JS

Webブラウザで、同一画面上に画像を上乗せ表示するためのスクリプト。材料はCSSJavascriptと少々の画像。

ひとたび縮小画像をクリックすれば、黒色半透明の背景がページを覆い、その上に拡大画像が真ん中に表示される。画像を閉じれば、元のページに戻る。

Pure CSS lightbox

数年前より各種blog上で爆発的に流行したlightboxだが、ここはてなではがんじがらめの記述タグ制限によりLightbox JSを使用できない。

フォトライフのスライドショー使えばいいじゃん」そう思うハッピーな貴方はハッピーなままで居てください。

screenshot

トホホ感に苛まれているそこの貴方、実ははてな上でも似たような効果を得る事ができます!というわけで サンプル紹介

【動作確認環境】Firefox, Safari, Google Chrome, 他

  • “Pure CSS lightbox”はその動作に CSS3 :targetセレクタ もしくは CSS Expression を使用します。
  • 元コード自体は IE6 / IE8β2(互換モード) で動作するのですが、はてなダイアリー上では何か差し支えがあるようです。そこはおいおい解決しようかと…?