「thickbox3.1」のボタンをカスタムする方法をご存知でしょうか

質問

「thickbox3.1」のボタンをカスタムする方法をご存知でしょうか。

はじめまして。
自身のサイトで「thickbox」を利用しています。
表示される "<PREV "　" NEXT> " " close or Esc Key "を
シンプルなボタンのイメージに変更したいのですがやり方が分かる方が
いらっしゃいましたら教えて頂きたいと思います。

希望のsampleデザインも添付させて頂きます。

回答No.3

yyr446 · ベストアンサー

No.2です。
補足でご提示のサンプルを見ると、あえて<img>の挿入は止めてるみたいですね。
詳しく解析してませんが、<a>の子要素に<img>入れるとまずいのかも知れません。

サンプルをまねするのなら、

TB_NextHTML = "<span id='TB_next'><a href='#' id='TB_nextButton'></a></span>";

TB_PrevHTML = "<span id='TB_prev'><a href='#'id='TB_prevButton'></a></span>";

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'></a></div>");

として、CSSの方で、画像指定してます。
#TB_nextButton{
background: url(/shared/img/btn_next.gif) no-repeat;
width:25px;
height:25px;
padding:0px;
margin: 0px 0px 0px 0px;
float:left;
}

#TB_noNext{
width:20px;
height:20px;
padding:0px;
margin: 0px 0px 0px 0px;
float:left;
}

#TB_prevButton{
background: url(/shared/img/btn_prev.gif) no-repeat;
width:20px;
height:20px;
padding:0px;
margin: 0px 10px 0px 0px;
float:left;
}

#TB_noPrev{
width:20px;
height:20px;
padding:0px;
margin: 0px 10px 0px 0px;
float:left;
}

TB_closeWindowButton{
background: url(/shared/img/btn_close.gif) no-repeat;
width:20px;
height:20px;
padding:0px;
float:left;
}

これを真似するのが手っ取り早いかと。

お礼

yyr446さま

ご回答ありがとうございます。
頂いた内容を真似て早速試してみます。
お忙しい中、ご丁寧にありがとうございます。

回答No.4

fujillin

No1です

No2の補足を見る限り、とりあえず目に付くのは「"」「'」の使い分け、あるいはエスケープ。
ダブルクォートの中ではダブルクォートは使用できませんのでご注意。

添付画像は、さっき添付しそこねたShadowBoxの画像です。

お礼

fujillinさま

いつもありがとうございます。
お返事が遅れて失礼致しました。

ご丁寧に画像を添付頂きありがとうございました。
今後もギャラリーの使用があるので
ShadowBoxも是非試してみようと思います。

回答No.2

yyr446

「thickbox3.1」自体の、初期設定やオプションで、ボタンイメージ
を指定する機能はないみたいですが、thickbox3.1のソースコードの
82行目、86行目にある

TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";

TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";

の<a>要素の中に自分で用意したボタンイメージを入れれば、出来るんじゃないかと
思います。（試してませんけど）

お礼

yyr446さま

はじめまして、
早速ご回答いただきありがとうございます。

再度質問で恐縮なのですが
私なりに教えて頂いた部分を下記のようにいじってみたのですが
画像を表示しようとするとエラーが出てしまいました。
なにか方法がお分かりでしたら教えて頂けないでしょうか。

こちらのサイトのギャラリーを真似たいと思っております。
http://www.shinichiroariizumi.com/works_ladies.html

【<PREVの部分】
TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>NEXT &gt;</a></span>"

→TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'><img src="images/button_next.jpg" width="15" height="25" alt="button_next" /></a></span>"

【NEXT>の部分】
TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; PREV</a></span>"

→TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'><img src="images/button_prev.jpg" width="15" height="25" alt="button_prev" /></a></span>"

【close or Esc Keyの部分】
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");

→$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'><img src="images/button_close.jpg" width="25" height="25" alt="button_close" /></a> or Esc Key</div>");

回答No.1

fujillin

ざっと見ただけですが

「<PREV」、「NEXT>」の部分はそれぞれ
TB_PrevHTML = "<span id='TB_prev'>&nbsp;&nbsp;<a href='#'>&lt; Prev</a></span>";
TB_NextHTML = "<span id='TB_next'>&nbsp;&nbsp;<a href='#'>Next &gt;</a></span>";
のように定義されて、変数で出力されているようなので、ここだけ編集すればよいかと。

closeボタンの方は変数になっていないようで、
<div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>
のような記述になっています。
ただし、こちらはiframeの場合やlayerの場合など表示方法によって、何箇所か記述されているみたいですね。

いずれにしろ、もとがHTMLソースの文字列になっているので修正は比較的簡単かと。

どのような使用法をなさっているか不明ですが、（↑）の情報で自力で修正できないようであれば、似たような機能のものはたくさんありますから自分の気に入ったものを使うという方法もありかと思います。
ご提示に近そうな気がするのはShadowBoxかなぁ…（添付画像参照：デフォルト表示状態）
http://www.shadowbox-js.com/index.html
（↑いろいろオプションがあるので、カスタマイズ指定もできるみたい）

お礼

fujillinさま

はじめまして、
早速ご回答頂きありがとうございます。

先にお返事頂きましたyyr446さまにお返事させて頂いたのですが
画像への差替えがうまくできず悪戦苦闘しております。
何かアイデアがございましたらどうぞよろしくお願い致します。

お礼が再度質問になってしまいすみません。