このページで設置した jQuery lightBox plugin に続いて今度は、 jQuery plugin の thickbox を設置します・・・・なぜかと言うと、前回の設置ページで試した「wp-lightpop」がHTMLファイルを表示できたのが素敵に思え羨ましかったからです・・・・(;^_^A アセアセ そこで検索してみつけたのが、thickbox でした。 では早速設置・・・・
まずはこちらからダウンロード
ダウンロードする所は 「thickbox.js」 「thickbox.css」 「compressed version of jQuery」 「loadingAnimation.gif」 の4つです。
ダウンロードすると 「thickbox.js」 「thickbox.css」 「jquery-latest.pack.js」 「loadingAnimation.gif」 の4つのファイルができるので、
そのファイルのうちの「jquery-latest.pack.js」を「jquery.js」にリネーム
そして、すべてのファイルを適当なフォルダ(ここでは、jquery-thickbox)に入れFTPで任意の場所(ここではwp-admin等と同じ最上層にします)にアップロード。
※ちなみに jQuery lightBox plugin を設置済みの場合は、「jquery-latest.pack.js」(jquery.js)は使い回しができるようです。それと、「loadingAnimation.gif」も「lightBox」と同じ画像で構わないなら使い回し出来ます。
thickbox.js の設定
8行目に「loadingAnimation.gif」のパスを設定します。
黄色の部分を設定してください。
thickbox.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
黄色の部分を設定してください。
HTML表示 使用方法
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.html」をthick Boxを使って表示する場合
黄色い部分がポイントです。
※「?」以降の「width=280&height=150」は、省略できます。(文章が指定した高さを超える場合には、自動的にスクロールバーが表示されます)
・・・・自分の場合は、thick Box はHTML表示のみで、画像は light Boxを使うのでこれで完了です。
テストHTML
(※cssファイルをいじって多少デザインを変えてあります)
・・・一応参考までに、
画像表示使用例 (どちらも、実際に試していません (;^_^A アセアセ )
単品バージョン
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.jpg」をthick Boxを使って表示する場合
グループバージョン
サムネイル画像「test_thumbnail_1.jpg」~「test_thumbnail_3.jpg」をクリックした後、「test_1.jpg」~「test_3.jpg」をthick Boxを使って表示する場合
と、このように「rel 」に同じ名前を指定すると、グループ化され「next」ボタンが表示されるらしい・・・・
以上、気に入って頂けましたでしょうか?? σ(^◇^;)ヒヤアセ
設定方法
まずはこちらからダウンロード
ダウンロードする所は 「thickbox.js」 「thickbox.css」 「compressed version of jQuery」 「loadingAnimation.gif」 の4つです。
ダウンロードすると 「thickbox.js」 「thickbox.css」 「jquery-latest.pack.js」 「loadingAnimation.gif」 の4つのファイルができるので、
そのファイルのうちの「jquery-latest.pack.js」を「jquery.js」にリネーム
そして、すべてのファイルを適当なフォルダ(ここでは、jquery-thickbox)に入れFTPで任意の場所(ここではwp-admin等と同じ最上層にします)にアップロード。
※ちなみに jQuery lightBox plugin を設置済みの場合は、「jquery-latest.pack.js」(jquery.js)は使い回しができるようです。それと、「loadingAnimation.gif」も「lightBox」と同じ画像で構わないなら使い回し出来ます。
thickbox.js の設定
8行目に「loadingAnimation.gif」のパスを設定します。
var tb_pathToImage = "https://example.com/jquery-thick-box/loadingAnimation.gif"; |
thickbox.jsと関連ファイルの外部リンク設定
次にJavaScriptとスタイルシートを、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。
自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script type="text/javascript" src="https://example.com/jquery-thick-box/jquery.js"></script> <script type="text/javascript" src="https://example.com/jquery-thick-box/thickbox.js"></script> <link type="text/css" rel="stylesheet" href="https://example.com/jquery-thick-box/thickbox.css" media="screen" /> |
HTML表示 使用方法
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.html」をthick Boxを使って表示する場合<a href="test.html?width=280&height=150" class="thickbox" title="test"><img src="test_thumbnail.jpg" border="0" width="100" height="100" alt="test" /></a> |
※「?」以降の「width=280&height=150」は、省略できます。(文章が指定した高さを超える場合には、自動的にスクロールバーが表示されます)
・・・・自分の場合は、thick Box はHTML表示のみで、画像は light Boxを使うのでこれで完了です。
サンプル
クリックしてみてください。(画像ではなく文字リンクでもできます)テストHTML
(※cssファイルをいじって多少デザインを変えてあります)
・・・一応参考までに、
画像表示使用例 (どちらも、実際に試していません (;^_^A アセアセ )
単品バージョン
サムネイル画像「test_thumbnail.jpg」をクリックした後、「test.jpg」をthick Boxを使って表示する場合
<a href="test.jpg" class="thickbox" title="test" rel="test"><img src="test_thumbnail.jpg" border="0" width="120" height="90" alt="test" /></a> |
グループバージョン
サムネイル画像「test_thumbnail_1.jpg」~「test_thumbnail_3.jpg」をクリックした後、「test_1.jpg」~「test_3.jpg」をthick Boxを使って表示する場合
<a href="test_1.jpg" class="thickbox" title="scene1" rel="group"><img src="test_thumbnail_1.jpg" border="0" width="120" height="90" alt="scene1" /></a> <a href="test_2.jpg" class="thickbox" title="scene2" rel="group"><img src="test_thumbnail_2.jpg" border="0" width="90" height="120" alt="scene2" /></a> <a href="test_3.jpg" class="thickbox" title="scene3" rel="group"><img src="test_thumbnail_3.jpg" border="0" width="120" height="90" alt="scene3" /></a> |
以上、気に入って頂けましたでしょうか?? σ(^◇^;)ヒヤアセ
関係のある記事
No user の書き込みがあります
コメントほしぃ~よぉ~ σ(^◇^;)