Movable Type 備忘録

 jQueryでLightbox風な表示やってみる(ThickBox)

  • Jun212007
  • Vote:
    http://bizcaz.com/archives/2007/06/21-174811.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

こんにちわ^^

すいませんねぇ、jQuery 関連の記事ばっかりで (;￣∇￣A
このサイトで使用している JavaScript を可能な限り jQuery 1本化しようと思ってまして、それに伴っていろんな機能を TRIAL and ERROR を繰り返してますの。

※今後ももぅ少し jQuery 関連の記事が連続しちゃいそうです (^▽^;)

1st Step として、前回のjQueryでスムーススクロールを勉強がてらやってみました。

2nd Step として、Lightbox (prototype.js 関連)の使用をやめて、jQuery のプラグインである ThickBox を使ってみましたのでご紹介します。

以下のサンプルページ中のネコたんのイメージをクリックしてみてください。
サンプル

先ほども言ったように、ThisBox は jQuery のプラグイン(拡張機能)として併用します。
基本的な機能としては、こちらのサムネイルをLightbox JSで表示してみるで紹介している、Lightbox とほぼ同等かと思われます。

ディレクトリ構成

  1. http://●●●.com/
  2.   |
  3.   +-- index.html <-- 各自のトップページ
  4.   +-- styles-site.css <-- 各自のスタイルシート
  5.   |
  6.   +-- js/
  7.   | +-- jquery/
  8.   | | +-- plugins/
  9.   | | | +-- thickbox.js <-- ThickBox 用 JS
  10.   | | | +-- thickbox.css <-- ThickBox 用 CSS
  11.   | | |
  12.   | | +-- jquery.js
  13.   | |

カスタマイズ

  1. まず jQuery をアップロードします。
    jQuery のアップロードについては、こちらのjQueryを使ってみるを参考にしてください。

  2. 次に ThickBox をアップロードします。
    こちらのThickBox 3から thickbox.js をダウンロードしてください。 そして、上記ディレクトリ構成のようにアップロードします。

    あと、CSS も公開されてますのでコピペして thickbox.css というファイル名で保存して、同様にアップロードしてください。

  3. テンプレートを変更します。
    HTMLヘッダ(<head>～</head>)の間に以下を追加します。

    HTMLヘッダ

    1. <link rel="stylesheet" href="<$MTBlogURL$>js/jquery/plugins/thickbox.css" type="text/css" media="screen" />
    2.  
    3. <script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
    4. <script type="text/javascript" src="<$MTBlogURL$>js/jquery/plugins/thickbox.js"></script>

    次に表示するイメージを以下のようなフォーマットでタグを記述します。

    1. <a href="http://●●●/image.jpg" title="タイトル" class="thickbox"><img src="http://●●●/image.jpg" width="160" height="120" alt="タイトル" /></a>

    青い字の部分にイメージファイルの URL を指定します。
    緑の字の部分でタイトルを指定してます。

    そして、赤い字の部分が重要です。
    必ず class='thickbox' を追加するようにしてください。

以上で jQuery を使って Lightbox 風なイメージファイルの表示ができました。
あと、以前ページをGreyboxでボックス表示してみるで紹介しました Greybox 的な表示もできるようです。

以下のサンプルページ下の方にあるメールフォームというリンクをクリックしてみてください。
サンプル

上記サンプルは以下のようなフォーマットでタグを記述します。

  1. <a href="http://●●●.html?TB_iframe=true&height=600&width=600" title="ページ名称" class="thickbox">テキスト</a>

表示したいページの URL に青い字の部分を付加します。
'width' と 'height' は任意に指定してください。

以上です。
1つの JavaScript で Lightbox と Greybox の機能が満たせるのでとっても便利かと (●＞∀＜●)／

 Trackback Pings(1)

from overseas*fun

旅行記頁の写真の拡大表示、メールフォーム画面表示に、「ThickBox」を導入

Tracked on August 23, 2007

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード