【ハウツー】

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

もっと見る

人気記事

一覧

新着記事

世界的大発明の原点を体験できるミュージアム
[00:21 9/30] 趣味
白亜の館で古き良き時代にタイムスリップ
[00:21 9/30] 趣味
誕生から60年。愛され続ける横浜の味をお土産に
[00:21 9/30] 趣味
[りゅうちぇる]ハプニング目撃し「キャー!」 メーキングでぺことの出会いも赤裸々に……
[00:00 9/30] エンタメ
[オーバーロード]総集編が劇場版アニメ化決定
[00:00 9/30] ホビー