<< テーマ更新 | main | なめらかにスクロールするjQuery >>

画像をポップアップ表示するjQuery

2013.08.15 Thursday | by こも
Facebookのように画像をポップアップして表示するjQueryを使ってみました。

LiteBoxというjQueryが公開されているようで、今回はそのlitebox-1.0を使ってみました。





1.ダウンロード

LiteBoxの公開サイトからlitebox-1.0.zipをダウンロードして解凍。

「css」「js」「images」などのフォルダから必要なファイルをコピーしてきます。



2.HTMLを記述

ヘッダ部分にJSとCSSのパスを通して、bodyタグでliteboxの初期化を行います。

そして、自分で設置した任意の画像ファイルへリンクを張ります。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LiteBox Test</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
</head>

<body onload="initLightbox()">

<a href="myimage/pict01.jpg" rel="lightbox[example]" title="ビーチ">
<img src="myimage/pict01.jpg" width="120" height="80" alt="ビーチ" />
</a>

<a href="myimage/pict02.jpg" rel="lightbox[example]" title="カヤック">
<img src="myimage/pict02.jpg" width="120" height="80" alt="カヤック" />
</a>

<a href="myimage/pict03.jpg" rel="lightbox[example]" title="海の中">
<img src="myimage/pict03.jpg" width="120" height="80" alt="海の中" />
</a>


</body>
</html>

これだけのコードで画像がポップアップ表示してくれました。
なかなか便利で使えます。

ちなみに設置サンプルはこちらにおいています。

Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM