thickboxのjavascriptについて

前へ 次へ
このQ&Aのポイント
  • ウェブサイト作成初心者のためのthickboxの使い方と注意点について詳しく解説します。
  • thickboxを使用したhtmlページの作成方法と、必要なスクリプトファイルおよびスタイルシートの記述方法について説明します。
  • thickboxを使うページだけに必要なスクリプトやスタイルシートの記述方法を紹介します。前ページに記述する必要はありません。
回答を見る
  • ベストアンサー

thickboxのjavascriptについて

ウェブサイト作成初心者です。 ホームページの一部のページでthickboxを使用してhtmlを表示するページを作ろうとしています。 その場合 <head>～</head>内に <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" /> はthickboxを使うページだけに記述すればいいのでしょうか。それとも前ページに記述しないといけないのでしょうか。 お分かりなられる方、お手数ですが教えてくださいませ。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
noname#137826
noname#137826
回答No.1

「前ページに記述する」というのは何をおっしゃりたいのかわかりませんが、thickboxの呼び出しはその動作を期待するページで行えばOKです。 例えば、A.htmlというページにはサムネール画像が表示されていて、それをクリックすると大きな画像がthickboxによって表示されるようにしたいとします。その場合、ご質問にあるような記述はA.htmlにあればOKです。

hotrod7020
質問者

お礼

kaorine様 ご回答大変ありがとうございます。「前ページ」というのは私の間違いで、「全ページ」でした。申し訳ございません。 ではA.htmlのページをthickboxで表示させたいと思えば、その関連するページにだけ行えばよいのですね。 さっそく試させて頂きます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • thickboxで画像ギャラリーが表示されない

    あるサーバー上でthickboxの画像ギャラリーが表示されていたんですが、別のサーバに移し変えたとたんに表示されなくなりました。 <script language="javascript" src="js/jquery.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="js/thickbox.js" charset="UTF-8"></script> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all"> </head> <body> <div class="others"><a href="new_bike/12413289033.jpg" title="花" rel="old" class="thickbox"><img src="images/other_button.gif" border="0" alt="その他の画像" class="rollover" /></a><a href="new_bike/12413289034.jpg" title="木" rel="old" class="thickbox" style="display : none;"></a></div> 表示されなくなってからはスクリプトタグ内にcharset="UTF-8"を追加しただけです。 サーバ環境に依存するのでしょうか？ 教えてください。 宜しくお願いします。

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！

  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • jqueryのloadで読み込んだページ内でthickboxで画像を表示する方法

    画像表示処理方法で教えて頂ければと思います。 テスト用に２つのファイル(index.html, test.html)を用意しました。 index.htmlで thickboxを使用して画像をクリックすると希望通り （画像がアップ表示）の動作をします。 しかしindex.htmlのloadで test.html読み込んだ時の画像部分が、 target="_self"で押したときの動作になってしまいます。 解決方法、よろしくお願いします。 -----index.html----- <html> <head> <link href="thickbox.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <script type="text/javascript"> <!-- function init(){ $("#Test").load("test.html"); } // --> </script> </head> <body onload="init()"> <div id="Test"></div> <hr> (2)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a> </body> </html> -----test.html----- (1)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a>

  • Thickboxを自動で閉じることは不可能でしょうか？

    お世話になります Thickbox.jsを使用してloading graphのようなものを作っているのですが100%になったら自動で閉じるようにはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>Thickbox</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen" /> </head> <body><div id="wrapper"> <a href="search.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=90&width=300" title="charasearch" class="thickbox"> <input type="button" value="character search" class="search"> </a> </div> </body> </html> <<search.html>> 実際にはhtmlファイルではなくcgiファイル(search.cgi)で処理を行っています Thickbox.cssをいじって本文のみ表示させてます（上側のTitleやcloseボタンはdisplay:none;しています 必要なとこだけになりますが・・・ <script type="text/javascript"><!-- window.onload = function() { Timer = setInterval('counts()',1); } w=0; function counts() { w += 1; document.getElementById("graph").style.width = w + "px"; if(w >= 300) { clearInterval(Timer); } } //--></script> <style type="text/css"><!-- #graph { width:0px; height:20px; background-color:red; margin-top:5px; float:left; } --></style> <div id="graph"><div> ページを移動させていけば簡単なのですが大まかな流れとして id,passなどを入力 character searchボタンを押す Thickboxでseach.cgiを呼び出しchara.cgiの中から同じものがないか調べる あればエラー表示、なければ続けて入力といった感じにしています

  • ThickboxでHTMLを指定サイズで表示したい

    ThickboxでHTMLページを指定したサイズで表示させたい。 お世話になります。 自社サイトでthickboxを使用したいと考えています。既に画像をクリックして大きな画像を表示させる（オーバーレイ表示）ためにthickboxを導入しており、それは比較的簡単だったのですが、今回は別個に作成したHTMLページを同じようなデザインで表示させたいと思っています。 いろいろなサイトを参考にしてこのようなソースになりました。table{width:800px;height:600px}が記述されたsample01.htmlというページをやはりwidth:800px、height:600pxでthickboxでオーバーレイ表示させたいというのが目標です。 <head> <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> </head> <body>～中略～ <a href="sample01.html?width=800px&height=600px" class="thickbox"><img src="images/sample02-small.jpg" alt="画像の説明" border="0"></a> </body> ところが、一応Thickboxは機能するのですが、キレイな形で表示されず、またその理由もよく分からず困っています。初心者なので、つまらないところで行きつまっているかもしれませんが、どうか知恵をお貸し下さい。 ※分からない点 (1)800×600px指定しているのに、小さいサイズで表示され、その文スクロールバーが表示される。インラインフレームのようなデザインにしたくない。 (2)上部にグレー部分ができる（Closeボタン用だと思われるがいらない）。既に画像を表示させる際の場合のように右上部に自分で制作したボタンを配置してCloseボタンとしたい。 既に作成したthickboc.cssは--- #TB_closeWindow{ position:absolute; width:30px; height:30px; top:-15px; right:-15px; } #TB_closeWindowButton{ background-image:url(../images/button-thickbox-close.png); position:absolute; width:30px; height:30px; } (3)表示させたHTMLが文字化けする。 <script type="text/javascript" charset="Shift_JIS"></script>指定しています。 以上です。どうかご教示よろしくお願いします。

    • 締切済み
    • CSS
  • 複数のjQueryを導入するには…？

    見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する