【機能概要】
ページ移動やポップアップ画面を使わず、画面中央に拡大画像を表示する
背後にある元々のページは、暗めに表示される。
拡大画像上、あるいは画像外領域、画像右上の〔×〕ボタン、いずれかをクリックすると元の表示に戻る。
複数画像をグループとし、← →にて連続表示する。
“Lightbox_Plus test02”の方式で絵本をつくる。


【ソース】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../../lightbox/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="../../lightbox/lightbox_plus.js"></script>
<title>Lightbox_Plus test04</title>
</head>
<body>
<a href="./images/1.jpg" rel="lightbox04"><img border="0" src="./thumb/1.jpg" title="" /></a>
<a href="./images/2.jpg" rel="lightbox04"><img border="0" src="./thumb/2.jpg" title="" /></a>
<a href="./images/3.jpg" rel="lightbox04"><img border="0" src="./thumb/3.jpg" title="" /></a>
<a href="./images/4.jpg" rel="lightbox04"><img border="0" src="./thumb/4.jpg" title="" /></a>
<a href="./images/5.jpg" rel="lightbox04"><img border="0" src="./thumb/5.jpg" title="" /></a>
<a href="./images/6.jpg" rel="lightbox04"><img border="0" src="./thumb/6.jpg" title="" /></a>
</body>
</html>


【必要なもの】
Lightbox Plus」をダウンロード。
使用するのは resource フォルダ内のファイルのみ。
さらに、jojo.css、sample.css、lightbox_plus_min.js は不要。

【lightbox_plus.js を書き換える】
1023行目からの resource 部分を設置したフォルダ名(http://~のURL)に書き換える。
1034行目の animation:false を animation:true に変更。


  << Lightbox Plus のテスト03 画像にキャプションをつける  
testrooms TOPへ