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

2023/09/05 01:01

このQ&Aのポイント

簡単な画像切り替えのプラグインcrossSlideを使用して画像を表示しようとしていますが、表示されません。
HTMLとJavaScriptのコードに問題はなさそうですが、何が原因で画像が表示されないのかわかりません。
ブラウザにはタイトルが表示されるので、誤字や文法の問題ではないようです。

ベストアンサー

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

2013/05/04 11:49

簡単な画像切り替えのプラグインとして、 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>の文字は表示されません。何が原因なのでしょうか。よければアドバイスの方よろしくお願いします。

papasu0545
お礼率100% (4/4)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

yamada_g
ベストアンサー率68% (258/374)

2013/05/07 14:23 回答No.1

CrossSlideは全く使ったことがなく、この質問で初めて知ったものですが、記載のコードをそのまま動かすと CrossSlide: container element does not have its own width and height というエラーメッセージが出力されました。ですので、widthとheightを設定すればいい、というかしなければいけないと思います。また、CrossSlideを適用する要素に他の要素を入れてもimg要素のみになってしまうようです。

質問者

お礼 2013/05/07 20:10

無事機能しました＾＾助かりました＞＜ありがとうございました。画像切り替えにCrossSlideを使うのはjQueryではもしかして一般的ではないのでしょうか。簡単な記述でできるものとして、これが検索で出てきました。画像切り替えで一般的に使われてるものでお勧めがあれば教えていただけると嬉しいです＞＜

関連するQ&A

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です。どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
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
日本語記述が出来ません（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>  </head>
- ベストアンサー
- その他([技術者向] コンピューター)
スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣）私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。ソースを貼っておくのでよろしくお願いします。ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css">  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT>  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> </HEAD><BODY><DIV id=slide class=galleryview>  <DIV id=gallery_box>  <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV>   <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL> </DIV> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。困っているので、お願いします。
- 締切済み
- JavaScript
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
- 締切済み
- JavaScript
IEだけjsファイルを読み込まない指定
よろしくお願いいたします。 IEだけに適用させたくないjsファイルがあり、 HTMLファイルの<head></head>内に、下記のように記述してみたのですが、  IEだけでなく他のすべてのブラウザで適用されなくなってしまいました。書き方が間違っているのでしょうか・・？ソースは下記のようになっています。 <!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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Description" content="あああ" /> <meta name="Keywords" content="あああ" /> <title>タイトル</title> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="import.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  以下略また、こちらのページを参考に記述いたしました。 http://blog.playunderworld.com/web/ie-conditional-comment/ もし原因をご存知でしたらお教えいただけたらと思います。どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。ＩＥでは、きちんと表示されるのですがファイヤーフォックスですとCSSを認識してくれないようです。下記が自分会社のソースです。何が悪いのでしょうか？よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></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=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
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> お願いします。
- ベストアンサー
- JavaScript
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">  $(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> 宜しくお願いします。
- ベストアンサー
- インターネットビジネス
外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー
実に不思議なのですが、以下のように4つのJSファイルをインクルードしているHTMLファイルをローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。ですが、script1～4.js　の行を全てコメントアウトすると、エラーはでません。 1～4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、どの行を外しても、やはり「文字が正しくありません」と出てしまいます。ローカルの然るべきパスに1～4はあります。また、HTML同様、JSもEUCになってます。何が原因なのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>
- ベストアンサー
- JavaScript