• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：CrossSlideが起動しません。）

CrossSlideが起動しない原因と対処法

このQ&Aのポイント
  • 制作中のサイトのトップページにCrossSlideを設置したが、起動せずに「Loading...」の文字のみ表示される。
  • JavaScriptが不明であり、他のサイトで使用されたソースを使用している。
  • 原因を教えていただける方がいれば、お願いしたい。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

不可思議だったんで、「cross-slide.js」入手して試してみたんですけど、 こいつ結構くせのある融通きかないプラグインですね！。 まず、コンテナーのサイズがCSS又はスタイル属性で固定指定されてないとだめです。 <div id="visualArea" style="width:600;height:300;"> Loading...</div> みたいに．． それから、表示する画像のサイズがコンテナーより小さいとだめみたいです。 ※エラー吐き出してます。 それから、 speed: 45, //px/sec fade: 1 //sec の指定ですが、フェード指定時間内に描画が終っちゃうようだとエラーだします。 うっとしい！。これはspeed指定せずに sleep: 3, fade: 1 みたいにspeed指定しなければ、気にしないで済みます。 そおいったところかな。 （結果） 私しゃ、こんなライブラリー使いたくない！他の探します。

ladymoon1979
質問者

お礼

本当にありがとうございました！ とても勉強になりました。 他のライブラリーを使うことも考えてみたいと思います。 お手数おかけしました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

<script type='text/javascript' id='visualArea'>のid='visualArea'をはずしてしまうと、「Loading...」の文字も出なくなってしまうんです？ ＝＞それは正しい動きではないかと、はずす事によって出力先が特定できて、「CrossSlide」が起動してるんじゃないかと..。画像が表示されないのは他に原因があるんじゃないですか。 「move/move_1.jpg」のパスとファイル名あってますか。そのページと同じディレクトリー にmoveというディレクトリーがあって、その中にmove_1.jpg無いとだめですよ。UNIX系のサーバーだとパス名・ファイル名の大文字小文字も区別しますよ。 それから外部CSSに「stylesheet/thickbox.css」とあるけれど、他のライブラリーも一緒に使ってるんですか？

ladymoon1979
質問者

お礼

ありがとうございます。 「move/move_1.jpg」のパスとファイル名とディレクトリーは何度も確認しましたが、合っています。 ＞それから外部CSSに「stylesheet/thickbox.css」とあるけれど、他のライブラリーも一緒に使ってるんですか？ このページではなく、別のページで使用しています。 無知すぎて申し訳ございません。

全文を見る
すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

とりあえず、 <script type='text/javascript' id='visualArea'> のid='visualArea'ってタイプミスですか？ <div id="visualArea"> Loading...</div> と重複してますけど．．．．

ladymoon1979
質問者

補足

ありがとうございます。 <script type='text/javascript' id='visualArea'>のid='visualArea'をはずしてしまうと、「Loading...」の文字も出なくなってしまうんです。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • XHTMLで外部JSファイルを読み込むには？

    XHTMLで外部JSファイルを読み込むには？ よろしくおねがいします。 初歩的ですみません 当方　XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。

  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ 　　　　　new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • 日本語記述が出来ません（XML?)

    初めて質問いたします。 海外のホームページテンプレートを購入し、編集しているのですがなぜか日本語表記がされなくて困っています。 CSS部分には問題なさそうなのですが、誰か原因がわかりましたら教えていただけると助かります。 ちなみにfirefoxもIEも同様でした。どうぞ宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>○○○○</title> <meta http-equiv="Content-Type" content="text/html; charset="shift-jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.2.1.js" type="text/javascript"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script src="js/cufon-replace.js" type="text/javascript"></script> <script src="js/Swis721_Th_BT_400.font.js" type="text/javascript" ></script> <!--[if lt IE 7]> <link href="ie_style.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>

  • crossSlideがうまく機能しないです；

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!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=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。

  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • JQuery の CrossSlideを設置したのですが IEでだけ表示できません。

    JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。 ブラウザのエラーでは 「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」 とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。 ソース -head- <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { 　width: 640px; 　height: 415px; 　margin: 0; 　padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

  • liタグで先頭のみボーダーを消す方法

    liタグで先頭のみボーダーを消そうと下記のソースを記述してInternet Explorer6で閲覧した所、一瞬liタグの先頭でボーダーが見えてしまう事がありました。 その為、これを抑止したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、下記が今の所考えている条件となります。 1. http://www.kyosuke.jp/yugajs/のyuga.js 0.7.1を使用し、最初の要素にclass="firstChild"、 最後の要素にclass="lastChild"を付加しておりますが、なるべくならこの仕組みは使用し続けたいと思います。 2. liの数はCMS上で動的に変化させても問題ないようにしたいと思います。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text/javascript" src="js/yuga.js" charset="utf-8"></script> <title>title</title> <style type="text/css"> <!-- body { margin-top:10px; } ul li.firstChild { border-top:0; } li { border-top:1px solid; } --> </style> </head> <body> <ul> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ul> <div><img src="Sunset.jpg" alt="" width="800" height="600" /></div> <div><img src="Winter.jpg" alt="" width="800" height="600" /></div> </body> </html> 以上、よろしくお願いします。

    • ベストアンサー
    • HTML
  • light boxが上手く表示されない

    はじめまして。 ホームページ作成初心者の者です。 今独学でホームページを作成してまして写真をlightboxを使って表示させたいのですが上手く拡大されず、そのままのサイズで中途半端に表示されます。 HTML内の<head>～</head>タグ内の記述は以下になります。 <!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=utf-8"> <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" /> <link rel="stylesheet" href="style.css" type="text/css"/> <title>写真ギャラリー</title> </head> 以下1部省略 <div id="gallery-boxA"> <p> <a href="images/ナゴラン.jpg"rel="lightbox" title="ナゴラン"><img src="images/ナゴラン.jpg" width="200" height="180" /></a> <a href="images/ケイタイオウフウラン.jpg"rel="lightbox" title="ケイタイオウフウラン"><img src="images/ケイタイオウフウラン.jpg" width="200" height="180" /></a> <a href="images/サガリラン.jpg"rel="lightbox" title="サガリラン"><img src="images/サガリラン.jpg" width="200" height="180" /></a> </p> </div>になります。 初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。 上手く拡大表示するにはどうしたらいいのでしょうか？ 何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する