1. HOME
  2. BLOG
  3. クールな画像表示の演出者 Lightbox JS
BLOG

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

BLOG

136

ローディングアニメーションがまるで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は「エイジャックス」ではなく「アヤックス」と読みたい欧州サッカーファン!(自滅

  2. keiji

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

  3. しかの

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

  4. keiji

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

  5. 山道正男

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

  6. keiji

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

  7. 山道正男

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

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

PickUp