【ハウツー】

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

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

 
  • <<
  • <

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) 角丸で表示する

もっと見る

人気記事

一覧

新着記事

アーク、AMD Radeon RX480を搭載するゲーミングPC3とBTOオプション追加
[15:53 6/30] パソコン
レオパレス21、全国の物件にAndroid TV対応STB「Life Stick」を標準設備
[15:46 6/30] 家電
「フラット35」利用者の平均年齢は39.8歳に - 5年ぶり低下
[15:35 6/30] マネー
ボンバルディア、Cシリーズ初号機をスイスインターナショナルに納入
[15:33 6/30] 趣味
NEC、導電性と吸着性をもつ新規ナノ炭素材料「カーボンナノブラシ」を発見
[15:31 6/30] テクノロジー