Lightbox

Lightbox JSを使って画像出力をかっこよくします。

もとネタは山口さんのimage.scmです。

必要なもの

Lightbox JS v2.0以上
files:wiliki-lightbox.scm

インストール

Lightbox JSを静的なHTML上で動作を確認し、そのあとでリーダーマクロを導入しましょう。

Lightbox JSのjsをjs以下に置いたとすると、 wiliki.cgiのmy-page-headerを

(define (my-page-header page opts)
  `((script (@ (type "text/javascript") (src "js/prototype.js")) "")
    (script (@ (type "text/javascript") (src "js/scriptaculous.js?load=effects")) "")
    (script (@ (type "text/javascript") (src "js/lightbox.js")) "")
    (div (@ (style "font-size:80%;text-align:right"))
         ,@(cond-list
            ((wiliki:top-link page))
            ((wiliki:edit-link page))
            ((wiliki:history-link page))
            ((wiliki:all-link page))
            ((wiliki:recent-link page))
            ((wiliki:language-link page))))))

のように書き換え、あとは最後に

 (load "wiliki-lightbox.scm")

と書けば動きます。

使いかた

基本的な使いかたはimage.scmと同じです。

srcを元絵、thumbをサムネイルとすると、Wikiマークアップは、

[[$$lightbox src thumb ...]]

です。

使える属性は

width
height
alt
title
group

です。 groupでグルーピングできます。グルーピングの詳細はLightbox JSを参照してください。オリジナルのimage.scmより減っているのは作者の趣味です(class=menuなどが書かれると問題が発生するのは明らかですので、class,idは無効にしてあります)。

サンプル

WiLiKi/2006/05/04/Lightbox