iBoxを使う
それでは実際にiBoxを使ってみましょう。ここでは実画像をphotoフォルダに、サムネール画像をthumbフォルダに入れてあります。
iBoxは他のライブラリを使用しないので必要なスタイルシートファイル(ibox.css)とスクリプトファイルを読み込むだけです。
<link rel="stylesheet" href="css/ibox.css" type="text/css">
<script type="text/javascript" src="js/ibox.js"></script>
iBoxではリンクがクリックされると実画像を表示します。この設定は以下のように<a>
タグのrel属性でiboxの文字を指定するだけです。
<a href="photo/001.jpg" rel="ibox">~</a>
photo/001.jpgが実際に表示する実画像になります。以下のようにすると「富士山を表示」の文字をクリックすると実画像であるphoto/001.jpgが表示されます(サンプル01)。
<a href="photo/001.jpg" rel="lightbox" title="富士山">富士山を表示</a>
サンプル01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/ibox.css" type="text/css">
<script type="text/javascript" src="js/ibox.js"></script>
<title>iBoxサンプル</title>
</head>
<body>
<h1>iBoxサンプル</h1>
<div>
<a href="photo/001.jpg" rel="ibox" title="富士山">富士山を表示</a>
</div>
</body>