ThickBoxとはなんぞや
という人は、コチラをごらんください
簡単に言うと、画像をクリックしたら、画面ににょっと現れるJavaScriptの技術です。Lightboxとか、Liteboxとか、LightViewとか、いろいろありますが、どれも似たような動きをします。
これをブログに追加したいなぁと思って、設置してみました。
ちなみに上のリンク先にやり方も書いてあります。
まず、Thixkbox3.1配布サイト（英語）のDownloadから、必要ファイルをダウンロードしてくる
ファイルサイズをおさえた形式のものがあるので、うちではこれを使います。
- thickbox.js（thickbox-compressed.js のファイル名を変更して保存）
- thickbox.css （ダウンロードのみでサーバーにはUPしない）
- loadingAnimation.gif
- jquery.js（jquery-latest.pack.jsのファイル名を変更して保存）
の４つ。
保存した「thickbox.js」をテキストエディタで開き、
var tb_pathToImage = "images/loadingAnimation.gif";
のimage部分を
var tb_pathToImage = "https://自分のアカウント名.up.seesaa.net/ファイルをUPするフォルダ名/loadingAnimation.gif";
絶対パスで指定。
自分のアカウント名は、うちでは「hedhu」、
ファイルをUPするフォルダ名は、うちでは「jstb」にしてあります。
絶対パスでの記述が終わったら、上書き保存して、すべてのファイルをSeeSaa側にUPします。すべて同じフォルダ上にまとめておくと管理しやすいかもしれません。
UPさせたファイルを実行させるために、デザインの変更を行います。
管理画面から、「デザイン」→「HTML」から、現在適用中のHTMLをクリック
最初から数行のところにある、<head>〜</head>タグ内で、
<meta http-equiv="Content-Script-Type" content="text/javascript" />
の後に、以下の文を記述。
<script type="text/javascript" src="https://hedhu.up.seesaa.net/jstb/jquery.js"></script>
<script type="text/javascript" src="https://hedhu.up.seesaa.net/jstb/autothickbox.js"></script>
<script type="text/javascript" src="https://hedhu.up.seesaa.net/jstb/thickbox.js"></script>
ここでも、スクリプトファイルは絶対パスで指定。
ダウンロードしたjsファイルは２つだけど、UPしたのは３つになってる件
autothickbox.js というファイルが増えてます。
これは、thickboxを適用させるために、記事の画像HTML部分に、class="thickbox"という記述を追加する必要があるのを、自動でしてしまおうというもの。
それを記述させたスクリプトがautothickbox.jsです。
以下のサイトを参考に記述しました。
■ アップロードした画像を自動的にThickBoxで表示
http://h2ham.seesaa.net/article/90296109.html
$(document).ready(function(){
$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
.addClass("thickbox");
});上のコードをテキストエディタの新規ファイルにコピペし、うちでは「autothickbox.js」という名前をつけて保存。
HTMLへの記述時に、jquery.jsと、thickbox.jsの間にくるように書きます
記述がおわったら保存し、次にcssの設定を。
ダウンロードしたcssファイルをテキストエディタで開き、中にかかれている記述をすべてコピー。
SeeSaa管理画面で、「デザイン」「デザイン一覧」から現在適用中のデザインを選ぶと、cssの編集ができます。
先ほどコピーしたcssを、わかりやすくするために一番下に貼付、「スタイルシートを変更する」ボタンを押して保存します。
これでthickboxを使う準備が完了。
ブログの記事にある画像をクリック（なければ画像をつけて投稿するんだ！）
クリックして、画像がにゅっと出てくれば成功
おまけ
実は、ThickBoxを実装する前は、Lightbox JSというのを使おうと思ってました。表示がもっさりせずにサッと出るのがいい。
そしてスクリプト自体のサイズも小さい。
それが気に入ってたんだけど、、うまくいきませんでした。
というのも、JavaScriptの技術を使ってにゅっと出る動きを表現しているのだけど、ここにJavaScriptのonload属性が使われている。これは、本来1ページに１つしか実行されない。一番最後に追加された箇所だけだそうです。
そして、SeeSaaブログでは、自動で広告が追加されるんだけど、そこにonload属性が使われている。完全に競合しちゃってます。広告のonloadが後にくるようになっているので、Lightbox JSが動いてくれない(´･ω･`)
Lightbox JSと比べて、ファイルサイズの大きいThickboxやLightbox2などはこのonload属性の競合を回避する作りになっている（それ故にファイルサイズが大きい？）んだそう。
一応自分でスクリプト追加して、onloadの競合を回避できるらしいんですが、それらのサイトを見に行っても私には(°Д°)ﾊｧ? だったので、Thickboxに鞍替えしました＾＾
以下に自分が参考にしていたサイト紹介しておきます。
CSSに関しての記述が抜けているのかな？
上記の内容でThickBoxのCSSを適応させたら完成ですね。
通常のlightBoxは確かに競合が起こるかもしれないですけど、
jQueryを導入しているのであれば、
jQuery lightBox pluginというのもあるので、
それを導入してみてはどうでしょうか？
参考：http://leandrovieira.com/projects/jquery/lightbox/
cssを忘れていました＾＾；
ご指摘いただきありがとうございます。
cssの部分を追記しました。
なるほど。jQueryでもLightboxが使えるということですね。
Lightboxへのこだわりがあるわけではないので
（どちらかというとにゅっとでた後に
にゅっと下に伸びないThickboxの方が好みです。）
当分このまま使ってみようと思います。
自分語で意味不明な文章ですいません＞＜
紹介いただきありがとうございました。
しかしどうも反映されません
何度も確認し、自分のアカウント名、フォルダ名(分かりやすいようこちらと一緒の名前に)も、何度も確認しました
考えられる原因はなにがあるかわかりますかね？(´;ω;`)
具体的にどこがどうとは言えませんが、
こういう時たいてい間違っているのは自分だったりします。
私の経験では9割方自分の設定ミスやファイルアップロード忘れ、
記述箇所がおかしいなどなど。
解決策と呼べるかはわかりませんが、
手順を覚えるほど何度も読みまくった後、
音読で１つ１つ確認していくと、道が開けたりしたりします。
他に思いつくとすれば、
seesaaブログ側の画像に関する設定なんかも関係あるんでしょうか？
(現在のseesaaブログでは画像クリック時、
デフォルトでは画像専用ページにジャンプする気がします。
この記事を書いた当初はそういう機能がなく、
また私はこの機能自体ブログの設定でオフにしています)
画像を実際にクリックした時、どういう反応を示すかがヒントになると思います。
上手く答えられなくてすみません。成功しますように。
私も上の方と同じくこちらのサイトを参考に設定したのですが
反映されませんでした…( ；∀；)
画像詳細ページへの遷移はオフにしてあります。
画像をクリックすると新しいウィンドウで画像だけ表示される…という状況です。
何がだめなんでしょうね…残念です…( ；∀；)
自分自身、すでにやり方を忘れたに等しいので情けない話、具体的なアドバイスができませんが、、
それを前提で、ブログのURLを書いていただければ、ソースを見に行きますがいかがでしょう？
といっても、ソースを見てもわかるのは該当ファイルがupされてるかどうかとか、タグの記述が合ってるかどうかというくらいですが。
見たから解決できるという保証はできません、、