jQueryのthickboxの使用方法

ThickboxはjQueryベースの、ポップアップダイアログと画像ブラウザのプラグインです。Thickboxを使うにはjQueryライブラリとThickboxのソースコードファイルをインクルードする必要があります。

Thickbox の基本手順は次のとおりです。

まず、jQueryとThickboxのソースコードファイルをダウンロードし、それらをあなたのプロジェクトディレクトリに保存してください。

に以下のコードを追加して、必要なCSSとJavaScriptファイルを取り込みます：

<link rel="stylesheet" href="path/to/jquery-ui.min.css">

<link rel=”stylesheet” href=”path/to/thickbox.css”>

<script src=”path/to/jquery.min.js”></script>

<script src=”path/to/jquery-ui.min.js”></script>

<script src=”path/to/thickbox.js”></script>

正しいファイルパスに「path/to/」が置き換えられることを確認してください。

Thickbox を有効にするには、ページのロード時に次の JavaScript コードが呼び出されるようにしてください。

<script type="text/javascript">

$(document).ready(function() {

// 初始化 Thickbox

$(‘[data-thickbox]’).click(function() {

$.tb_show($(this).attr(‘title’), $(this).attr(‘href’));

return false;

});

});

</script>

上記のコードは、Thickbox を初期化し、data-thickbox 属性を持つすべてのリンク要素を Thickbox 機能を利用できるようにします。これらのリンクがクリックされると、ポップアップウィンドウが表示されます。

あなたの HTML ページで以下コードを使って、Thickbox の機能のあるリンクを作成します。

<a href="path/to/large_image.jpg" title="Image Title" data-thickbox>Open Image</a>

パス/to/large_image.jpg を開きたい画像のパスに置き換えてください。

すると、ユーザーが「画像を開く」リンクをクリックした時点で、指定画像を表示するThickboxポップアップが表示されます。

なお、示したコードは Thickbox の基本的な使い方の例です。必要に応じて、Thickbox のスタイルや機能をさらにカスタマイズできます。