No.3ベストアンサー
- 回答日時:
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
- 回答日時:
No1です
No2の補足を見る限り、とりあえず目に付くのは「"」「'」の使い分け、あるいはエスケープ。
ダブルクォートの中ではダブルクォートは使用できませんのでご注意。
添付画像は、さっき添付しそこねたShadowBoxの画像です。
fujillinさま
いつもありがとうございます。
お返事が遅れて失礼致しました。
ご丁寧に画像を添付頂きありがとうございました。
今後もギャラリーの使用があるので
ShadowBoxも是非試してみようと思います。
No.2
- 回答日時:
「thickbox3.1」自体の、初期設定やオプションで、ボタンイメージ
を指定する機能はないみたいですが、thickbox3.1のソースコードの
82行目、86行目にある
TB_NextHTML = "<span id='TB_next'><a href='#'>Next ></a></span>";
TB_PrevHTML = "<span id='TB_prev'><a href='#'>< Prev</a></span>";
の<a>要素の中に自分で用意したボタンイメージを入れれば、出来るんじゃないかと
思います。(試してませんけど)
yyr446さま
はじめまして、
早速ご回答いただきありがとうございます。
再度質問で恐縮なのですが
私なりに教えて頂いた部分を下記のようにいじってみたのですが
画像を表示しようとするとエラーが出てしまいました。
なにか方法がお分かりでしたら教えて頂けないでしょうか。
こちらのサイトのギャラリーを真似たいと思っております。
http://www.shinichiroariizumi.com/works_ladies.h …
【<PREVの部分】
TB_NextHTML = "<span id='TB_next'> <a href='#'>NEXT ></a></span>"
→TB_NextHTML = "<span id='TB_next'> <a href='#'><img src="images/button_next.jpg" width="15" height="25" alt="button_next" /></a></span>"
【NEXT>の部分】
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>< PREV</a></span>"
→TB_NextHTML = "<span id='TB_next'> <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
- 回答日時:
ざっと見ただけですが
「<PREV」、「NEXT>」の部分はそれぞれ
TB_PrevHTML = "<span id='TB_prev'><a href='#'>< Prev</a></span>";
TB_NextHTML = "<span id='TB_next'><a href='#'>Next ></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さまにお返事させて頂いたのですが
画像への差替えがうまくできず悪戦苦闘しております。
何かアイデアがございましたらどうぞよろしくお願い致します。
お礼が再度質問になってしまいすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(コンピューター・テクノロジー) PC利用中に勝手に起動する窓を消し去る方法を教えて下さい。 1 2023/05/08 16:48
- 写真・ビデオ Snowの写真保存について 1 2023/04/06 07:29
- Visual Basic(VBA) Edge操作のアプリが例外発生に 1 2023/03/12 21:22
- Access(アクセス) Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- その他(動画サービス) Tver アンケートに回答しても視聴できない(何度もアンケート画面が開く) 1 2023/01/13 21:47
- Excel(エクセル) アンケート集計用VBAについて教えて下さい。 約100人にアンケート内容が入ったExcelファイルを 1 2022/07/27 13:12
- その他(Microsoft Office) windows10で作業を終了する際の「保存しますか はい いいえ」を表示させずに自動で保存する方法 6 2023/03/15 11:29
- Word(ワード) ワードの変更履歴のオンオフ判別方法 1 2023/05/25 15:07
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
jQueryのclickイベントハンドラ
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
エンドロールを枠の中で表示す...
-
Flickrのような綺麗なサムネイ...
-
キャラクターがぴょこんと飛び...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
-
jQueryでネスト構造の<li>がク...
-
1枚の画像をクリックすると複数...
-
401エラードキュメントを401.ht...
-
変数名をどのようにつけるのが...
-
HTML id名とjavascript変数名
-
ディレクトリ内画像表示
-
【javascript で動的に a タグ...
-
オンマウスで、画像切り替え+...
-
IplImageをPictureBoxへ表示が...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報