【ハウツー】

ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示

1 ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示

古籏一浩  [2007/07/12]
  • <<
  • <

1/6

ThickBox 3とは?

ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じようなライブラリとしてはLightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。また、画像だけでなくHTMLファイルなども表示させることができるので、いろいろ応用できそうです。Lightboxと比べてもThickBoxの方がプログラムサイズがコンパクトなことも魅力です。

ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使うことができます。ThickBox 3ではHTMLの<a>タグのrel属性にthickboxの文字を記述するだけで画像の表示もHTMLページの表示もできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればThickBox 3を利用することができます。

ThickBox 3はここページからダウンロードできます。

ThickBox 3

「Download」のタブで表示されている部分に各ファイルへのリンクがありますので、対象ファイルを保存します。圧縮ファイルもありますが、以下のファイルが必要です。

ライブラリの配置図

一番最後のURLはjQueryライブラリの最新版になっています。この最新版のファイル名はjquery-latest.jsになっていますが、ここでは説明の都合上、jquery.jsと名前を変更したものを使用します。jQueryライブラリは圧縮しコンパクト化されたものが以下になります。

jquery-latest.pack.js

Thickboxも圧縮されたものが以下に用意されています。

thickbox-compressed.js

これらをダウンロードして名前を変更すれば、ここで説明しているサンプルをそのまま動作させることができます(jquery-latest.pack.jsはjquery.jsに、thickbox-compressed.jsはthickbox.jsに名前を変更してください)。

  • <<
  • <

1/6

インデックス

目次
(1) ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示
(2) ThickBox 3を使う
(3) グループ化して表示する
(4) 日本語で表示するようにする
(5) 他のページを表示する
(6) 角丸で表示する

もっと見る

特別企画 PR

人気記事

一覧

新着記事

NMB48山本彩、アイドル刺傷事件「人ごとじゃない」- ファンとの距離感悩む
[15:28 5/27] エンタメ
[ドラゴンクエスト]渋谷ヒカリエで30周年記念の体験型イベント 原寸大の「ロト装備」やジオラマも展示
[15:00 5/27] ホビー
トレンドマイクロ、TeslaCrypt/CryptXXX対応の復号ツールを無償提供
[14:54 5/27] パソコン
ASUS、Thunderbolt 3・USB 3.1 Type-C拡張カード付属のX99 ATXマザー
[14:52 5/27] パソコン
宮迫博之、さんまに「生きてるだけでクレームです!!」新大阪での被害を報告
[14:45 5/27] エンタメ

特別企画 PR