問題解決方法:Light Boxの正常な動作について

このQ&Aのポイント
  • Light Boxを正常に動作させるための方法をご紹介します。
  • 外部サイトから取得したメニューとLight Boxを共存させる方法を解説します。
  • SSIを利用せずにソースを記述する方法も紹介します。
回答を見る
  • ベストアンサー

Light Boxについて

Light Boxについて 現在サイトを作成しているのですが、一つのページでLight Boxを使用したいのですが上手くいきません。 メニュー部分は素材サイトから持ってきたメニューを多少カスタムして使用しているのですが、そのメニューと共存させようとするとLight Boxだけ正常に動きません。 下記が試しに作ったサンプルページです。↓ Light Boxは正常に動かず、別ページに移動して画像が表示されます。 ブラウザの左下には『ページでエラーが発生しました。』と表示され、クリックすると『オブジェクトでサポートされていないプロパティ、メソッドです。』と表示されます。 http://aviflag.orsp.net/movie2.shtml 試しにメニュー部分のソース(js、cssファイルも)を除いたページでは普通にLight Boxは動きします。↓ http://aviflag.orsp.net/movie3.shtml 念のため下記がメニューの素材を配布しているサイトです。 http://apycom.com/menus/1-black.html 他ページではSSIを利用してメニュー部分とヘッダー部分をインクルードしていますが、提示したぺージでは分かりやすくしようとインクルードせず実際にソースを記述しています。拡張子はSHTMLのままですが。 私自身HP作成に関して半可通の知識しかなくテーブルでレイアウトしているのでソースが稚拙でお恥ずかしい限りですが、分かる方がおりましたらご教授ください。よろしくお願いします。

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

  • ベストアンサー
  • totomac
  • ベストアンサー率53% (53/99)
回答No.1

prototype.jsとjQueryがコンフリクトをおこしているのかなと 思いますが。 回避方法はググるか、jQuery版のLightBoxを使うかでしょうか。

参考URL:
http://www.css-lecture.com/log/javascript/029.html
kazuking1213
質問者

お礼

totomacさん、ご回答ありがとうございます。 何とかコンフリクトを回避することが出来、Light Boxが正常に動作するようになりました。 こういう事もあるのだととても勉強になりました。 多謝しております、ありがとうございました。

関連するQ&A

  • テキストと画像のセンタリングについて

    テキストと画像のセンタリングについて 今現在サイトを作っています。 メニューの素材をダウンロードしてきて導入しようと思ったのですが、導入するとテキストや画像がセンタリングしてしまいます。 メニューは下記サイトの素材を使用しました。 http://apycom.com/menus/1-black.html 下記が私のサイトです。 汎用性をあげる為にTOPページ以外のページ上部のメニュー部分はまとめてSSIでインクルードしています。TOPページのようにalign属性を指定すれば解決できるのですが、それ以外に解決方法はないでしょうか?CSSファイルなどで設定されているのかと思いソースを見てみましたが、さっぱり分かりません。 http://aviflag.orsp.net/link.shtml サイトの作成について半可通の知識しかない為に、テーブルでレイアウトしていたりとてもお見苦しいソースですがよろしくお願いします。 どのようにすればテキストや画像がセンタリングされないようになるでしょうか? 分かる方がおりましたらご教授ください。何卒よろしくお願いします。

    • ベストアンサー
    • HTML
  • ライトボックスについて

    いつもお世話になっています。CSSで作られているライトボックスについて質問したいのですが、ほとんどのブラウザで見ることをできるようにすればよいのでしょうか。私の組んだものを他のパソコンで見ると崩れて上手く表示されないのですが、同じようにライトボックスを使用しているサイトを見てもまったく崩れていませんでした。何故なのでしょうか。補足大歓迎です。よろしくお願いします。

  • 伸び縮みしないシンプルな「ライトボックス」

    イラストのポートフォリオページを作っています。 サムネイルをクリックすると背面がグレーになってで大きなイラストが同一ウィンドウに表示させるようにしたいと思っています。(「ライトボックス」と呼ばれるもの?) 検索をするとサンプルソースが沢山でてくるのですが、 どれも、サムネイルをクリックすると“びのーん”と縦や横に 枠が伸び、画像が表示され、最後に「CLOSE」ボタンが表示される、 アクションのあるものばかりです。 シンプルに最初から画像サイズ枠で表示させるものを探しているのですが、サンプルソースのありかをご存知の方、いらっしゃらないでしょうか? 素人のため、説明が拙く申し訳ございません。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • wordpressでライトボックスで記事表示

    wordpressでライトボックスで記事表示 http://kidhair.com/short_style.htmlのページのように、画像一覧ページがあり、画像をクリックするとライトボックスで記事ページを表示することは可能でしょうか。 wordpressのバージョンは3.0.1を使っています。 宜しくお願い致します。

  • ビルダー ライト7 ソース表示の仕方

    ビルダー ライト7 ソース表示の仕方 判りません。教えて下さい。 ホームページビルダー ライト7を使っています。 OSはXP使用です。 トップページにカウンターを、と思い ソフトに付いている機能を使うのですが表示が上手くできなく、 ソースに直接貼り付けたいのですが ソースを表示するメニューが無く困っています。 ライトだから仕方がないのかも知れませんが 他の方法でソースが表示できる方法があれば教えていただけないでしょうか? 判り易く教えて頂くと助かります。

  • 同じページ内のボックスへリンクするためには

    hpをつくり始めた初心者です。 フレームでページを分けているのではなくて、 ボックスを作って、そのボックス内にリンク先のページを表示したいのです。 わかりにくいと思うので、下に例を書くと・・   _________________ |  | |  menu      | ←このmenuをクリック |_________________|    すると、  ______________  |              |  |              |  ←同じページに |   ボックス       |   あるボックス |              |   に表示 |              |  |______________| わかりにくいかもしれませんが、 知っておられましたら、やり方教えて下さい。

    • ベストアンサー
    • CGI
  • ライトボックス+サムネイル画像切り替え

    マウスオーバーで画像切り替え、クリックでライトボックス(テキスト付き)の画像表示をしたいと思っています。 http://wedding.walkerplus.com/h/00401/ →この画像切り替えの部分のものです。 これができるライブラリなどをご存知の方はいらっしゃいますか? ただ単に切り替えのjsとライトボックスを一緒に使ってしまうだけでよいのでしょうか? よろしくお願いします。

  • SSIでレイアウトが崩れる?

    SSI超初心者です。よろしくお願いします。 HPのメンテが大変になってきたため、共通部分のヘッダー・メニュー・フッターを外部ファイル化してSSIのインクルード文で読み込もうとしています。正常表示されていた元のHTMLファイルからカット・ペーストで外部ファイルを作成し、元部分にはインクルード文を挿入したうえでSHTMLファイルとして保存しました。 一応これでそれなりの表示にはなるのですが、微妙(10~20pxほど)にレイアウトがあちこち崩れて困っています。 とくにHTMLページからSHTMLページにリンクで行くと、全体が20pxほど下にずれているため、「がたっ!」が明白です。HTMLページからHTMLページへの移動ではそれは起こりません。 原因と対処方法が分かる方がいらしたら教えてください。超初心者なので、見当違いの質問でしたらごめんなさい。

    • ベストアンサー
    • HTML
  • Light Boxを正確に表示させるには?

    HPでライトボックスを使って画像を表示したいと思っています。 初心者なのでいろいろ探したところ、一番わかりやすかった下記のURLにあった説明どおりにlightboxをDLしhtmlファイルを作ってやってみたところ、デジデジ(というHP無料サイトを使っています)にアップロードする前に実験的に自分のPC上だけで見てみたらうまく表示されました。 http://www.howto-lightbox.com/ (参考までに、こちらは説明があったサイトです) でも、そのhtmlファイルやライトボックスの中に入っているファイル全てをデジデジにアップロードした状態では、画像がオーバーレイではなく、クリックしたサムネイル画像が並んでいた画面全体が、拡大画面そのものに完全に切り替わってしまうだけになります。(元にもどるためにはブラウザの【←】 を押すしかない状態になります) アップロード前に試したときは、ひとつのフォルダに、htmlファイル、画像の複数のファイル、そしてライトボックスのCCS、IMAGES、 JSの3つのフォルダを収めている状態でした。 でもデジデジにアップロードするときは、フォルダのままアップできないようなので、CCS,IMAGES,JSの3つのフォルダをそれぞれ開いて、中にあるファイルをひとつづつ全てアップロードしてみたのです このアップロードの操作が間違っているのでしょうか?それともライトボックスの3つのフォルダを開いてアップするなら、htmlファイルのソースもどこかで何か書き換えが必要なのでしょうか? ちなみに 私が作ったhtmlファイルのソースは、冒頭に <HEAD> <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> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> </HEAD> と書いており、画像のところはサムネイルをtableタグで一覧を作っているので たとえばその一か所の例をあげると <TD> <a href="55big.jpg"rel="lightbox[2012]" title="タイトル"><IMG SRC="55.jpg"BORDER="0"></a> </TD> というふうにしています。 (55jpgは、サムネイルの画像ファイルで、拡大したいものが55big.jpgです。グループ表示するために、グループ名は2012にしました) シンプルなオーバーレイにしたいということと、あまり複雑な説明のものはうまく理解できないので(初心者なので、上記URLの説明を解読するのが精いっぱいでした)ので、できれば上記のURLで紹介されたものを使って、うまく表示できればと思っています。 アップロード時に何かが間違っていたのであれば正しいアップロードの方法を教えていただければと思います。 あるいはhtmlファイルのソースの書き換えが必要ならば、具体的に書き換えたソースを コピーアンドペーストで使わせていただけるように、解答欄に書いていただければとても助かります。 お知恵、アドバイスをいただけたら幸いです。どうぞ、よろしくお願いいたします。

  • CGIの中にinclude

    メニューがコンテンツ変更で増減したときの管理がしやすいように、メニュー部分をCGIで作り、全ページで同じメニューを表示させるようにしました。 通常のHTMLファイルはこれで正常に表示するのですが、メールフォームCGIや掲示板CGI等にも同じように表示させたいのですがうまくできません。 HTMLファイルと同じように「include virtual」を記入しても何も表示されず、ソースを見ると「include virtual~」がむなしく表示されているだけでした。 で、次に「require '../menu/menu.cgi';」を試してみたのですが、こちらは500エラーが出てしまいます。 どのようにしたらよいのでしょうか? メニューCGIはただのHTML文ではなく、ページに応じたサブメニュー表示等をしているのでデコード処理をしていますが、これが原因とかありますか?

専門家に質問してみよう