【ハウツー】

ゼロからはじめる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) 角丸で表示する

もっと見る

人気記事

一覧

新着記事

iPhone新モデルが登場する秋到来! - Appleが9月7日イベント開催を正式発表
[06:37 8/30] スマホとデジタル家電
今田耕司「3 年前まで彼女がいた」目標は「東京五輪婚」と東野幸治に宣言
[06:00 8/30] エンタメ
宮根誠司「断ったら遺恨が…」弟子・川田裕美との共演を語る
[06:00 8/30] エンタメ
長谷部誠、黒柳徹子からのお触りに積極的発言「触ってもらえますか?」
[06:00 8/30] エンタメ
澤穂希、東京五輪に向けた今後の展望を語る『1周回って知らない話』初回2時間SP
[06:00 8/30] エンタメ