【使用例】画像もHTMLもOKな軽量Lightboxライブラリ「Floatbox」

最終更新日: 2008年7月1日 23:19

下準備

  1. Floatbox Image and IFrame Viewer <http://randomous.com/tools/floatbox/>から、スクリプトをダウンロードします。
  2. <head></head>内に、以下のように、CSS1点とJavascript1点をページに読み込みます(パスは適宜変更してください)。
  3. <link type="text/css" rel="stylesheet" href="floatbox.css" />
    <script type="text/javascript" src="floatbox.js"></script>
  4. <body></body>内に、以下のような書式で記述します(読み込む対象が、単独の画像の場合)。
  5. <a href="neko.jpg" rel="gallery" title="画像のタイトル">イメージ</a>
    
  6. 以上!

使用例

下記「イメージ」をクリック!

イメージ

応用

1:画像のグループを開く

イメージ1 イメージ2 イメージ3

<p><a href="aquarium-fish-26.jpg" rel="slideshow">イメージ1</a> 
<a href="aquarium-fish-33.jpg" rel="slideshow">イメージ2</a> 
<a href="aquarium-fish-39.jpg" rel="slideshow">イメージ3</a></p>

2:HTMLファイルを開く(+ウインドウサイズ指定)

HTMLオープン

<p><a href="dummy.html" rel="iframe" rev="width: 640px; height: 480px">HTMLオープン</a></p>

TIPS:ここで開いたHTMLはインラインフレームとして開かれますので、開いたHTMLに「印刷」ボタンをつけておくと、その部分だけを印刷できます。