Category:無題 2006-07-15

ある夏の夜

夜遅くに突然「花火」を見たくなりました。 そして、ふと、LightBox の事を思い出しました。

「そうだ! LightBoxを使えば、PukiWikiでも花火が見れる」

善は急げ?時間は夜の10時。見よう見まねで、PukiWikiのプラグインを作成しました。

結果は、見事「花火」を上げる事に成功しました。そして、新しい朝礼のスタイルもできました。これからは、写真を使って朝礼ができます。時間は既に夜中の12時を回っていました。

そろそろ梅雨も終わり夏本番ですね。今年の夏も暑いのでしょうか? LightBoxを使えば涼しげな夏を演出できそうです。

Web2.0って面白いですね。ある夏の夜の出来事でした。

LightBox

LightBoxは、Creative Commons Attribution 2.5 License で公開されてるJavaScriptです。

最近よく、CC(Creative Commons)を見かけるようになりましが、CCを使っているプログラムを見たのはLightBoxが初めてです。LightBoxのようなJavaScriptは CC が似合うのかもしれません。

lightboxプラグイン

「花火」を上げるのに自作したPukiWikiのプラグインの作り方を紹介します。 プラグインと呼ぶには申し訳ない位に簡単なソースです。 定義してあるのは、インライン要素だけです。

lightbox.inc.php

<?php
function plugin_lightbox_inline()
{
  if (($argc = func_num_args())<2) return;
  if (!defined("LIGHTTEXT_LOADED")){
    define("LIGHTTEXT_LOADED", "LOADED");
    global $head_tags;

    $head_tags[] = <<<HTML
<script type="text/javascript" src="skin/custom/js/prototype.js"></script>
<script type="text/javascript" src="skin/custom/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="skin/custom/js/lightbox.js"></script>
<link rel="stylesheet" href="skin/custom/css/lightbox.css" type="text/css" media="screen" />
HTML;
  }

  $argv = func_get_args();

  $imgurl = $argv[0];
  $title  = $argv[1];

  $rel = "lightbox";
  if (isset($argv[2]) && $argv[2] != ''){
    $group = $argv[2];
    $rel  .= "[$group]";
  }
  $html = "<a href=\"$imgurl\" rel=\"$rel\" title=\"$title\">$title</a>";

  return $html;
}
?>

使用例

夏の風物詩

夏の風物詩
-&lightbox(http://www.hoge.com/hoge/img/,風鈴,summer);
&lightbox(http://www.hoge.com/hoge/img/,朝顔,summer);
&lightbox(http://www.hoge.com/hoge/img/,向日葵,summer);
  • 第1引数 --- 画像URL
  • 第2引数 --- タイトル
  • 第3引数 --- セット表示する場合に指定するグループ名(オプション)

設置方法

lightboxプラグインとLightBoxのマージ作業は自分で行って下さい。ここでは、私の行った方法を紹介します。LightBoxは、Creative Commons Attribution 2.5 Licenseで公開されてるJavaScriptです。ご利用の場合はライセンスに従って下さい。

  1. LightBoxをダウンロードします。
  2. skin/customディレクトリ下にLightBoxを設置します。
  3. lightbox.jsを環境に合わせて変更します。
    //
    //	Configuration
    //
    var fileLoadingImage = "skin/custom/images/loading.gif";
    var fileBottomNavCloseImage = "skin/custom/images/closelabel.gif";
  4. lightbox.inc.php をプラグインディレクトリ(plugin/)下に設置します。

  • そちらの雨は大丈夫ですか?花火って動画と思ってました。意外でおもしろかったです。日曜、、も参加(生徒で)したかったのですがあまりにも未熟なもので、何も知らないので残念です。 -- アップル 2006-07-18 10:12:21 (火)
    • いつもコメントありがとうございます。大変励みになります。 -- y2sunlight 2006-07-18 11:28:57 (火)
  • lightbox.inc.php 本当に助かりました。lightpic_plus.jsやjquery.lightpop.jsとして活用しております。 -- ozaki 2009-11-11 19:41:33 (水)

最終更新のRSS Last-modified: Wed, 12 May 2010 08:58:19 JST (2689d)