© PANORAMA JOURNEY All rights reserved.

20062/14

クールな画像表示の演出者 Lightbox JS

ローディングアニメーションがまるでFlashような感覚。
どうやらjavascriptで実現しているようです。
サンプル画像

いつも拝見している Tociyuki::Diary さんで紹介されていたので、
早速トライしてみました。

使用方法はとても簡単です。
●その一
Lightbox JSのサイトから必要なファイルをダウンロード。
1. lightbox.css(スタイルシート)
2. lightbox.js(プログラム本体)
3. loading.gif(ローディングアニメーション)
4. overlay.png(背景用画像)
5. close.gif(クローズボタン用画像)

●その二
該当するHTML内のヘッダーパートに
<script type=”text/javascript” src=”…..lightbox.js”></script>
<link rel=”stylesheet” href=”…..lightbox.css” type=”text/css” media=”screen” />
を挿入(…..は、アップロードする場所のパス)。

●その三
該当するリンクに rel=”lightbox” を追加。

例:変更前
<a href=”/images/sample_l.jpg”><img src=”/images/sample_s.jpg”></a>
例:変更後
<a href=”/images/sample_l.jpg” rel=”lightbox”><img src=”/images/sample_s.jpg”></a>

あとは、上記のファイルをアップロードするのみ。

詳細は、Tociyuki::DiaryLightbox JSに詳しく書かれています。

ただ、このシステムをブログ(MovableType)で使う場合、
問題があるようです。
サイトで調べてみると、解決策がありました。

小粋空間:Lightbox JS の Movable Type での不具合を修正する

このサイトにもいつもお世話になっています。
またまた、助けて頂きました。感謝!

関連記事

  1. ローディングのインターフェイスが秀逸ですねぇ!<Lightbox JS
    これもいわゆる「AJAX」なんっすかねぇ・・・使えるなぁ。
    ウチも頑張ろう!

    #AJAXは「エイジャックス」ではなく「アヤックス」と読みたい欧州サッカーファン!(自滅

    • keiji
    • 2006年 2月 15日

    にのみやさん、こんにちは
    >#AJAXは「エイジャックス」ではなく「アヤックス」と読みたい欧州サッカーファン!
    今年は、盛り上がりそうですね。ドイツまで行っちゃいますか!?

  2. はじめまして。しかのと申します。去年の12月にコメントをいただいていたことに今頃になって気がつきまして。大変失礼いたしました。じつは、こちらのサイト、よく見させていただているんです。ぼくには、そう簡単には真似の出来ないウエブデザイン、本日の一言のような楽しいネタ、そして質の高いVRの数々、楽しませてもらっています。これからも寄らせてもらいますがよろしくおねがいいたします。

    • keiji
    • 2006年 2月 18日

    しかのさま、ようこそ。
    >じつは、こちらのサイト、よく見させていただているんです。
    有り難うござます。
    私も、しかのさんのサイト、楽しみにしております。
    こちらこそ、よろしくお願いします。

  3. keijiさんへ
     コメントの欄に書く事とは場違いですが、keijiさんのblogはMovableType3ですね。私はいまフリーソフトのはMovableType3で勉強中ですが、どう見ても、keijiさんのblogはMovableType3とスタイルが異なります。特に画面はばが狭い、コメントを表示させると、サイドが表示されず、縦長になる。
    1.  keijiさんのblogはMovableType3は個人ユースの有料ライセンスを購入しインストールしたものですか。参考に教えてくれませんか。
    2.  出来ればカレンダーも付けたいのですが個人ユースの有料ライセンスにはカレンダー機能は有るでしょうか。

    • keiji
    • 2006年 2月 26日

    山道さん、こんにちは。
    MovableTypeはライセンスによる機能の違いは無いと思います。
    MovableType 3.2の場合、プラグインのStyleCatcherで、
    お好みのスタイルテンプレートを読み込む機能があります。
    (メイン・メニュー > システム・メニュー > プラグイン > StyleCatcher)
    登録されているテンプレートには、カレンダー機能が入っているものが有りますので、
    それを使われると簡単だと思います。
    (私の場合は、自分でカスタマイズしています)

  4. keijiさんへ
     早速のご返事有り難うございます。私のblogでお礼言うべきですが、いつ消えるかもしれないので、こちらにお礼を書きます。当分勉強します。

  1. この記事へのトラックバックはありません。

旧住友赤平炭鉱立坑

旧住友赤平炭鉱(赤平アートプロジェクト)

北海道の中央部に近い赤平市。札幌から高速を使えば車で約1時間半ほどの距離にある緑豊かな街である。現在の人口は約1万人ほどであるが、炭鉱で栄え…

ハンバーガーリサ・山田 創

ハンバーガー リサ・山田 創

本場アメリカ仕込みのブルースギタリスト山田 創(ツクル)氏の店、ハンバーガー リサが閉店した。音楽、インテリア、ハンバーガー...すべてが大…

ガロ展

「ガロ展」

小樽文学館で開催された「編集長・長井勝一没後20年 -『ガロ』と北海道のマンガ家たち展」(2016年9月3日〜10月23日)の様子である。「…

宇宙ステーション・ミール

宇宙ステーション・ミール

1986年、旧ソ連によって打ち上げられた宇宙ステーション・ミールの予備機である。日本人として初めて宇宙飛行を体験した秋山豊寛氏(元TBS記者…

北海道秘宝館

北海道秘宝館

札幌市南区にある”札幌の奥座敷”こと定山渓温泉。市街地から約30キロ、車で小一時間ほどの場所にある。温泉街の入口にさしかかると巨大な観音像が…

ページ上部へ戻る