同HTML内で複数のjQueryを設置したいです

2023/10/28 12:30

このQ&Aのポイント

同じHTML内に複数のjQueryを使いたい方法を教えてください
買ってきたjQueryの本を元にタブメニュータイプと自動スライドショータイプのjQueryを同じHTML内に入れたいです
うまくいく方法を教えてください

ベストアンサー

同HTML内で複数のjQueryを設置したいです

2013/11/18 20:29

買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div>  <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div>  </body> </html>

sinto58167
お礼率55% (39/70)

その他（プログラミング・開発）
回答数2
ありがとう数2

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

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

ベストアンサー

warpspace
ベストアンサー率56% (83/147)

2013/11/19 17:19 回答No.2

idはHTML内でユニークでなければなりません。従って<div id="wrap">は、 1回しか指定できません。

質問者

お礼 2013/11/19 18:30

ありがとうございます。確かに仰るとおりでした。すごく基本的なことでした。

その他の回答 (1)

hirotn
ベストアンサー率59% (147/246)

2013/11/19 16:53 回答No.1

質問者

お礼 2013/11/19 18:31

こちらも基本的なことでした。確かに2つもいりませんよね(汗) ありがとうございます。

関連するQ&A

jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
同HTML内で複数のJavaScriptを設置
●JavaScriptを使用して、再生時間の異なったスライドショーを同時再生したい (ｊｓ1とｊｓ2の画像を重ねて、アナログ時計が動くようなスライドショーにしたい) ●現状：どちらか一方の画像しか動かない（ソースの後に記述したｊｓのみ動く）調べたところによると、jQueryを使用すれば可能との事で色々なサイトで調べ、試行錯誤したのですがうまく動きません。（参考にさせて頂いたサイト様：http://black-flag.net/jquery/20110525-3120.html） jQueryを使用しなければ、同時再生はできないのでしょうか？そうなると、以下のHTML、CSSなどを根本から変える必要があるように思っています。 ※実際に上記のサイトを参考に行ってはみたのですが・・・力不足で解決できませんでした。初歩的な質問かとは思いますが、ご指摘頂ければと思います。よろしくお願い致します。＿＿＿＿＿＿＿＿＿＿＿＿＿　　　XHTML　　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <?xml version="1.0" encoding="UTF-8"?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ポートフォリオ</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> <link href="top.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="portfolio.js"></script> <script type="text/javascript" src="portfolio2.js"></script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </head> <body onload="setTimeout('timerImg()', 3000);"> <body> <div id="header"> <img src="portfolio/logo2.png" alt="ヘッダー"></div> <div id="wrapper"> <div id="photo1"> <img name="img/1.png" src="img/1.png" alt="長針"></div> <div id="photo4"> <img name="img2/1.png" src="img2/1.png" alt="短針"></div> <div id="photo2"> <img src="portfolio/tokei.under.png"　alt="時計柄"></div> <div id="photo3"> <img src="portfolio/tokei.logo.png"　alt="ロゴ"></div> <ul id="contens-nav"> 　<li id="home"><a href="portfolio.html">HOME"</a></li> </ul> <ul id="contens-nav2"> 　<li id="works"><a href="works.html">WORKS"</a></li> </ul> <ul id="contens-nav3"> 　<li id="about"><a href="about.html">ABOUT"</a></li> </ul> <ul id="contens-nav4"> 　<li id="contact"><a href="contact.html">CONTACT"</a></li> </ul> </div> </body> </html> ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　CSS（base）　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ @charset "UTF-8"; * { margin:0; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; line-height: 1.5; } div#wrapper { position:relative; width: 844px; left: 50%; margin-left: -422px; } div#photo1 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 3; } div#photo4 { position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 2; } div#photo2{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 1; } div#photo3{ position: absolute; left: 50%; height: 100%; width: 844px; margin-left: -422px; z-index: 4; } ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　1　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document  ＿＿＿＿＿＿＿＿＿＿＿＿＿　　　ｊｓ　2　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ // JavaScript Document 
- ベストアンサー
- JavaScript
スライドショーについて
ど～もど～も。よろしくです。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勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。しかし、<div id="btn1">～</div>をクリックすると、オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいにギャラリー画面上に「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」と表示されます。どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1">　/* オーバーレイ用のボックス */ <div id="galleria">　/* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> <div id="overlay2">　/* オーバーレイ用のボックス */ <div id="galleria1">　/* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option);　/* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
Jqueryスライダーが動きません。
WEB制作の素人です。簡単といわれている「FlexSlider2」ですが、私がやったところ、画像は出たもののスライドにならず、そのまま上下に出てしまいます。一度見ていただき、間違えを教えていただけますか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
Jqueryスライドが動きません。教えてください
WEB制作の素人です。皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、登録した画像がそのまま出てしまいます。一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
画像のサムネール+フォトアルバムを制作中で困っています
こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。よろしくお願いいたします。サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > 　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・　　　　　40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、　B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。　　　　　　"mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。上記のような方法をとりたいです。どうか、よろしくお願いいたします。
- 締切済み
- JavaScript
同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。どうすれば動きますか？？理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたらそこの画像から順にsetIntervalが開始されるようにしたいと思っております。そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> 　　　　</div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、思いつかないのでご教授ください。下記のようなソースでギャラリーをjqueryで作成しました。「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。画像にたいしてフェードをかけようと思い、画像を初期状態でフェード０にしてactiveクラスがついたときにフェードを１００にしようと思いました。対象の画像をクリックすることでクラスを追加したり削除したりする方法はわかったのですが、「次へ」「戻る」ボタンを押すことで画像を切り替えているため、どのようにしたら順番に画像にクラスをつけることができるのかがわかりません。簡単な方法をご存知の方おられましたらよろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript