• ベストアンサー

thickboxで画像をゆっくり表示

thickboxで画像をゆっくり表示（消去）させる方法はありますでしょうか？クリックしたら画像をフェードイン、フェードアウトさせたいのです。htmlは分かるのですが、JavaScriptはさっぱりなもので……。どうぞよろしくお願いします。

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

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

おそらく、ソースファイルの一部を書き換えるしか方法がないのだと思います。以下のようにすると、とりあえずはフェードをするようです。(Firefox 3.6.13で1枚の画像を開く場合だけしかチェックしていません。) 128行目 $("#TB_window").append(・・・or Esc Key</div>"); ↓ $("#TB_window").append(・・・or Esc Key</div>").fadeIn("slow"); 271行目 $("#TB_window").fadeOut("fast",・・・ ↓ $("#TB_window").fadeOut("slow",・・・ "slow" は任意の数字に変えても構いません。数字はフェードの時間(ミリ秒)です。"slow"は600ミリ秒に相当します。 Thickboxのページ(http://jquery.com/demo/thickbox/)に書かれている通り、Thickboxは既に開発中止されており、類似する他のものを使うことが推奨されています。例として挙げられているものの中で例えばcolorboxでは $('a#login').colorbox({transition:'fade', speed:500}); のように記述することでフェードさせることができます。(きちんと動くかどうかわからない)ソースファイルの書き換えよりは、必要な機能が実装されている他のコードを使う方が良いと思います。ソースファイルの書き換えを提示してみたものの、私ならcolorbox等の他のコードを使います。

slowMay
質問者

お礼

詳しく説明してもらってありがとうございます。とても参考になりました。次からはcolorboxを試してみようと思います。

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

関連するQ&A

  • thickboxでの画像の表示

    thickboxで複数の画像を表示しようとしています。「その他の画像」のリンクをクリックするとそのページに関連する画像を表示したいと思っています。いろいろ調べているのですが、複数の画像のリンクを表示してグループ化しています。画像のリンクを表示することなくテキストリンクのクリックのみで表示したいです。PHPもあわせてコーディングするのでしょうか？ よろしくお願いします。

  • 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"を追加しただけです。 サーバ環境に依存するのでしょうか？ 教えてください。 宜しくお願いします。

  • 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での画像表示位置について thickboxを使ってますが、ブラウザの画面がかなり長くところどころで画像を入れております。 表示した場合、画面の上の方でポップアップされるのですが、 その場で開くように設定できますでしょうか？ 場所もばらばらに画像を随時追加いたしますので個別設定ではない方がいいです。 よろしくお願い致します。

  • thickboxのhtmlコンテンツの表示方法。

    thickboxのhtmlコンテンツの表示方法。 htmlコンテンツをthickboxで表示した状態で、その画面を閉じずに違う内容のhtmlコンテンツを表示したいのですが、可能でしょうか？ 画像なら、グループ化してしまえば簡単にできるんですが、 htmlコンテンツをグループ化とか出来ないんでしょうか？ thickbox以外でこのようなことが出来る方法があればお教えください。 よろしくお願いします。

  • 一定時間ごとに画像を切り替えたいです！

    JavaScriptを使って一定時間ごとにフェードイン、フェードアウトしながら画像を切り替えたいです!! インターネットでいろいろ調べていたのですが画像の切り替えはあってもフェードイン・フェードアウトをしながらのサンプルがなかったもので。 ちなみに最後の画像で止めたいです。 こんな感じにしたいです↓↓ OPENERS http://openers.jp/ 誰か解る方がいれば宜しくお願いします。

  • thickboxで画像を差し替えたときの表示がおかしい

    jQuery最新版、thickbox2.1で画像を表示させています。 すでにアップされている画像を同じファイル名、違うサイズで差し替えると、 拡大表示させたとき、差し替えた画像のサイズではなく古い画像サイズで 画像が開いてしまいます。ブラウザのキャッシュをクリアして再起動しても直りません。 こういったサイズ情報をどこかにキャッシュしているのでしょうか？ この問題の解決方法をご存知の方、教えてください。 環境:IE8 ※ちなみに検索してたら2ちゃんねるでも過去に同様の質問がありましたが、解決していないようでした。 http://pc11.2ch.net/test/read.cgi/hp/1127340053/ 379以降

  • thickboxを使って画像をポップアップするようにはできておりますが

    thickboxを使って画像をポップアップするようにはできておりますが、ブラウザを切替せずに、任意の場所に画像を切り替えていくようにするのはどうすれば良いでしょうか？ 最初に画像が表示されていて、その下にサムネイル画像が並んでいてマウスを置くと 最初に画像が表示されている場所に画像が切り替わっていくものです。 別途拡大表示もできれば幸いです。 thickboxをこのまま使用して+αでできれば幸いですが、それ以外で良い方法があれば 問題ございません。 みなさまよろしくお願い致します。

  • 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
  • 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> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する