• 締切済み

複数スクリプトの読み込みでlightboxが動作しません

MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示(lightbox)をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示(lightbox(最新版))のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示(lightbox)が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示(lightbox)のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。

  • ren_m
  • お礼率100% (2/2)

みんなの回答

noname#66720
noname#66720
回答No.1

prototype.jsのバージョンによっては動かないスクリプトがある可能性もありますが、とりあえず一番最初に一回だけ最新のprototype.jsを読み込むようにしてみてはどうでしょう? あとは、window.onloadなどの記述が複数あるなど。 その場合は http://blog.webcreativepark.net/2008/02/26-185844.html を参考に書き換えられるとよいと思います。 私の知っている範囲内ですが、参考になれば。

ren_m
質問者

お礼

スクリプトをひとつに絞った場合も動作しなかったため、lightbox専用にファイル名を変えてスクリプト一つ、残り二つを共用にして組み込んだ所無事に動作しました。 ありがとうございます。

関連するQ&A

  • 教えてください! 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>

  • 複数の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で「ファイルが見つからない」のエラーが出ます

    サイズの異なる複数の画像を実寸で表示したくて、Lightboxを使おうとしているのですが、この設定でどこが悪いのか分かりません。 テキストリンクの「コーヒーブレイク」をクリックすると、 --------------------- ファイルが見つかりません。 “/Volumes/backUP/image/g1/coffeebreak.jpg rel=”にファイルがありません。 --------------------- どなたか教えてください。 □ファイルの場所:  backup/Webフォルダ下にhtmlファイルとlightboxのcss,js,imagesの各フォルダがあります。 使用する画像は、  backup/image/g1フォルダ下にあります。 □表示するhtmlファイルにはこのように記述してあります。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_jis"> <META name="robots" content="none"> <title> ここにタイトルが入ります。 </title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <a href="../image/g1/coffeebreak.jpg rel="lightbox">コーヒーブレイク</a> </body> </html>

    • ベストアンサー
    • HTML
  • スクリプト同士がケンカ?

    初めまして。 HTML CSSを若干触れるものです。 サイトを制作していまして、 一部にlightboxをスクリプトタグで表示させていたのですが 新たに違うスクリプトタグ(トップ画像の上を画像がふらふら動くイメージのため) によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。 こちらがjugemで用意されたlightboxタグです。 <script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script> <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script> ここからが後から入れたタグです。 <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> これらは一緒に効果を出す事は可能でしょうか? よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 二つのJava Scriptを使うと動かない

    現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。 ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。 横スクロールの為に <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます event.preventDefault(); }); }); </script> とし、 マウスの上下スクロールで左右の動きをさせるために <script type="text/javascript" src="vscroll.js"></script> を置いてました。 この時点で動作は正常だったのですが、 ギャラリーが必要なため、lightbox <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の動きができなくなり、レイアウトも崩れました。 どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。 またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。 ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。(サムネイル画像をクリックすると一番左に戻る) よろしくお願いします

  • インラインフレームを使って、lightboxを表示させたい

    メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML(main.html)のheadに下記の記述をし、 【main.html】 <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> インラインフレーム内(in.html)のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。

    • ベストアンサー
    • HTML
  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <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() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • jqueryとlightboxが一緒に動作しない

    jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか? ソースコードは以下のようになっています。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() {   $("#menu_list p.menu_head").mouseover(function() {     $(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");     $(this).siblings();   }); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" 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> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。

  • Lightboxがエラーになります。

    一応、下記のようにタグを書き込むとローカルでは動くようになったのですが、 サーバーにupすると『ページでエラーが発生しました』となり 実行エラーがでます。 <head>~</head>内に、 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css"> <body>に <a href="images/xxx_1.jpg" rel="lightbox"><img src="images/xxx_2.gif" width="199" height="85"></a> です。 特に指示がなかったので、 FFFTPで普通にupしました。 パーミッションとか変更しなければならないのでしょうか。 尚、バージョンは設置の参考にしたサイト様がlightbox2.03だったので、lightbox2.03を使いました。 何か、最初の行が、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> でなければ、サイトのテンプレートデザインが狂ってしまうのです。 最新のバージョンだと、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> なので使えませんでした。 参考にしたサイト様は http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html です。 どうしてこんな現象が起きるのか、どなたか教えて頂けないでしょうか。

  • Lightbox2.0をウェブリブログ(BIGLOBE)で使用するには。

    この度、ウェブリブログでブログを始めて、Lightbox2.0を導入しようと試みているのですが 試行錯誤してみても結果、中途半端なできになり行き詰ってしまったので質問させていただきます。 長いですが、お知恵を貸していただけると大変助かります。よろしくお願いしますm(_ _)m (1)ダウンロードしてきたファイルは、ウェブリブログではディレクトリ管理できないし、js、cssはUP自体出来ないので、 他で借りていた有料サーバー(FC2ホームページ)に全て纏めてUPしました。 (http://○○○/js/)(http://○○○/images/)(http://○○○/css/) (2)htmlはウェブリブログでは直接編集できないのでウェブリブログのフリースペースに書き足しました。 ( <script type="text/javascript" src="http://○○○/js/prototype.js"></script> <script type="text/javascript" src="http://○○○/js/scriptaculous.js"?load=effects,builder></script> <script type="text/javascript" src="http://○○○/js/lightbox.js"></script> <link rel="stylesheet" href="http://○○○/css/lightbox.css" type="text/css" media="screen" />) (ここに書いたショートカットアイコンも機能しているので大丈夫なようです。) (3)解説サイトに倣ってlightbox.csを2箇所書き換え ( #prevLink:hover, #prevLink:visited:hover { background: url(http://○○○/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://○○○/images/nextlabel.gif) right 15% no-repeat; } ) (4)同じくlightbox.jsを4箇所書き換え fileLoadingImage: 'http://○○○/images/loading.gif', fileBottomNavCloseImage: 'http://○○○/images/closelabel.gif', <img src="○○○/images/loading.gif"> <img src="○○○/images/close.gif"> そして、Firefoxで確認してみると右下に出る筈のclose×ボタンが出ない…。IE6ではnext画像とplev画像が表示されていない。 試しに(4)のloading.gifとcloselabel.gifをウェブリブログにUP。絶対パスで書き換え。 すると、何故かは分からないがFirefoxIE6ともにcloseボタンが正常に表示されました。 しかし、IE6で確認してみると今度はこちらでprevlabel.gifとnextlabel.gifが表示されていない…。 ウェブリブログにUP。絶対パスで書き換えをしてみると今度はFirefoxで表示されない。結局Firefox優先ということで戻しました。 そして何気なくoperaで見てみると、新しい不具合…。 表示はされるのだがページの下の方。スクロールしていかないと見れない。最初は背景がグレーになるだけだ!と思ったほど。 以上、分かりにくい文章だとは思いますが、ご教示いただきたいと思います!よろしくお願いしますm(_ _)m

専門家に質問してみよう