[Top Page][Discussion][Edit History][All Pages][Recent Changes][->Japanese]

WiLiKi/Hack/Lightbox

Category of Hack

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

もとネタは山口さんのimage.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 ...]]

です。

使える属性は

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

サンプル