Movable Type 備忘録

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

Jun212007
Author: bzbell
Categories: Customize
Tags: JavaScript, jQuery

Next Page: jQueryで非同期通信(Ajax)やってみる
Prev Page: jQueryでスムーススクロール

こんにちわ^^

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

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

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

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

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

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

ディレクトリ構成

http://●●●.com/
  |
  +-- index.html               <-- 各自のトップページ
  +-- styles-site.css          <-- 各自のスタイルシート
  |
  +-- js/
  |    +-- jquery/
  |    |    +-- plugins/
  |    |    |    +-- thickbox.js  <-- ThickBox 用 JS
  |    |    |    +-- thickbox.css <-- ThickBox 用 CSS
  |    |    |
  |    |    +-- jquery.js
  |    |

カスタマイズ

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

あと、CSS も公開されてますのでコピペして thickbox.css というファイル名で保存して、同様にアップロードしてください。
テンプレートを変更します。
HTMLヘッダ(<head>～</head>)の間に以下を追加します。
HTMLヘッダ
1. <link rel="stylesheet" href="<$MTBlogURL$>js/jquery/plugins/thickbox.css" type="text/css" media="screen" />
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>
次に表示するイメージを以下のようなフォーマットでタグを記述します。
```
<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 的な表示もできるようです。

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

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

<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)

TrackBack URL for this entry:

from overseas*fun: 旅行記頁の写真の拡大表示、メールフォーム画面表示に、「ThickBox」を導入
Tracked on August 23, 2007

Comments(0)

No comments found.

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

ディレクトリ構成

カスタマイズ

Trackback Pings(1)

Comments(0)

Post a Comment