TOP > jQuery > 画像のポップアップ表示

画像のポップアップ表示


Facebookのように画像をポップアップして表示するjQueryを使ってみました。
LiteBoxというjQueryが公開されているようで、今回はそのlitebox-1.0を使ってみました。

手順1.litebox-1.0.zipをダウンロードしてきて解凍。

「css」「js」「images」などのフォルダから必要なファイルをコピーしてきます。
以下のファイルはサンプル用なので、特に不要と思われます。

css/style.css
images/image-1.jpg
images/image-2.jpg
images/image-3.jpg
images/thumb-1.jpg
images/thumb-2.jpg
images/thumb-3.jpg

手順2.headタグ内にjsとcssのパスを通す。

以下の4つのファイルをリンクを張ります。
css/lightbox.css
js/prototype.lite.js
js/moo.fx.js
js/litebox-1.0.js

手順3.bodyタグでliteboxを初期化します。

<body onload="initLightbox()">

手順4.画像へリンクを張ります。

<a href="表示する画像.jpg" rel="lightbox[example]" title="タイトル"><img src="サムネイル.jpg" /></a>


[example]の部分を任意の文字列に変えると、その文字列ごとにグループ化されるみたいです。




[htmlのソース]







[実行結果]


ビーチ カヤック 海の中

Sponsored Link
Powered by PHPなんか怖くないぞ(>_<)