クールなイメージ表示のLightBoxを使ってみた。

jQuery

クールなイメージ表示のLightBoxを使ってみました。
こんな感じ
http://moeten.info/flex/20090106_jQueryLightBox/

FancyBoxと使い方はほとんど同じです。
relで制御されているのでrelに「lightbox1」などでグループ化すればＯＫ。あとは自動で面倒を見てくれます。

<ul>
    <li>
        <a rel="lightbox1" href="01.jpg" title="タイトル:コメント"><img src="01s.jpg" alt="" /></a>
    </li>
    <li>
        <a rel="lightbox1" href="02.jpg" title="タイトル:コメント"><img src="02s.jpg" alt="" /></a>
    </li>
    <li>
        <a rel="lightbox1" href="03.jpg" title="タイトル:コメント"><img src="03s.jpg" alt="" /></a>
    </li>
</ul>

リンク

ソースの丸ごとダウンロード
http://moeten.info/flex/20090106_jQueryLightBox/20090106_jQueryLightBox.zip
ソースはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Lightbox Plugin (balupton edition)</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.lightbox.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="index.css" />
<style type="text/css">
h1{
    color:#552ff8;
}
</style>
</head>
<body>
<div class="section header">
<h1>jQuery LightBox Test</h1>
<ul>
    <li>
        <a rel="lightbox" href="01.jpg" title="タイトル:コメント"><img src="01s.jpg" alt="" /></a>
    </li>
    <li>
        <a rel="lightbox" href="02.jpg" title="タイトル:コメント"><img src="02s.jpg" alt="" /></a>
    </li>
    <li>
        <a rel="lightbox" href="03.jpg" title="タイトル:コメント"><img src="03s.jpg" alt="" /></a>
    </li>
</ul>
</body>
</html>