jQueryのroundaboutで画像挿入の際IEでの不具合について。| OKWAVE

jQueryのroundaboutで画像挿入の際IEでの不具合について。

jQueryのRoundaboutで画像を挿入した際にIE６で表示テストしたのですが IEでのみズレが生じてしまいます。ハックだったり試したのですが解決に至りませんでした。どうぞよろしくお願いいたします。これが問題のIE表示です。http://www.imagecheese.com/images/1zvz.jpg こちらがFireFox表示の正しいほうです。http://www.imagecheese.com/images/2udu.jpg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <style type="text/css"> /*CSS*/ -------------------------------------------------------- .roundabout-holder { list-style: none; width: 80%; height: 20em; margin: 1em auto; } .roundabout-moveable-item { height: 15em; width: 44.375em; border: 1px dotted #999; background-color:pink; cursor: pointer; } .roundabout-moveable-item img {/*画像の大きさ*/ height: 15em; width: 44.375em; .roundabout-in-focus { cursor: auto; } <body>------------------------------------------------------------------ <ul id="myRoundabout"> <li><img src="pic/block1.jpg"></li> <li><img src="pic/block2.jpg"></li> <li><img src="pic/block3.jpg"></li> </ul> <script type="text/javascript" src="common1/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="common1/js/jquery.roundabout-1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul#myRoundabout').roundabout({ minOpacity: 0.3, // 後ろのメニューの透明度 minScale: 0.5 // 後ろのメニューの縮小率 }); }); </script> </body> </html> -------------------------------------------------------------------------------------------- jquery roundabout http://www.fredhq.com/projects/roundabout/ 個人的にはCSSの問題かなぁと思っているのですがroundaboutの問題だったらと思ってこちらでも質問させていただきました。画像は900px×300pxです。本当に困ってます、よろしくおねがいします

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の各最新版で試しましたが同様でした。どの部分が間違っているのでしょうか？ご教授お願いします。

jQuery Cycle Plugin のナビ

img01.jpg～03.jpgをフェードインフェードアウトで繰り返し表示しているのですがここに手動追加？でナビゲーションを付けたいです。 #navi　部分のbutton02.jpg　にマウスオーバーで　img02.jpgを button03.jpg　にマウスオーバーで　img03.jpgをフェードイン。マウスアウトでフェードアウトさせて、そこからまた自動でローテーション。という事をやりたいのですが、自力ではできませんでした。ご教授の程、よろしくお願いいたします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('div#main').cycle({ fx:'fade', speed:500, timeout:4000 }); }); </script> <div id="main"> <img src="img/img01.jpg" /> <img src="img/img02.jpg" /> <img src="img/img03.jpg" /> </div> <div id="navi"> <ul> <li><a href="#"><img src="img/button02.jpg" /></a></li> <li><a href="#"><img src="img/button03.jpg" /></a></li> </ul> </div>

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

買ってきた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>

画像をランダムにフェードイン

【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。どうすれば正常に動きますか？よろしくお願いします。

【Jquery】before()でソースを挿入

Jquery初心者です。　 before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。単純なソース（たとえば<p>hello</p>など）はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか？書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>

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>

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> よろしくお願いします。

jquery.mobile　画像を中央に表示

<!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが正方形ではない画像が、右上に寄ってしまうのですがこれを回避する方法はありますか？例で言うのであれば添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

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> よろしくお願いします

jQueryの導入方法について

jQueryの導入が上手くいかず、全く動かなくて困っております。サイト（http://labs.opentone.co.jp/?p=4923）から説明があったURLから実装に必要なjQueryをダウンロードしました。・jquery.flexslider.js ・flexslider.css そして下記コードを入力しました。 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> さきほど取得した画像をスライドショーを表示させたい場所に下記の通り指定します。画像名を「sampleX.png」としています。 <div class="flexslider"> <ul class="slides"> <li><img src="images/sample1.png"></li> <li><img src="images/sample2.png"></li> <li><img src="images/sample3.png"></li> <li><img src="images/sample4.png"></li> <li><img src="images/sample5.png"></li> </ul> </div> 最後にflexfliderの関数を呼び出してスライドショーを実行させます。 $("document").ready(function(){ $('.flexslider').flexslider(); }); 以上のことを行ってjQueryらしい動作どころか画像すら表示されませんでした。（画像パスは入力し直しています）他にダウンロードするものやコードを書かなければならないことなど、動作に必要なものについて教えて頂けませんでしょうか。 ※上記以外のことは一切行っておりません何卒よろしくお願い致します。

画像／文字をスクロールさせるスクリプト

表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。今のところ、左へ向けてスクロールしていくものしか発見できませんでした。現状、/jquery-1.3.2.min.js　と、sc_text/jcarousellite_1.0.1.js　を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては１．左　右　などのボタンで、スクロールの方向を、簡単に切り替えられる。（もちろん、現在表示の位置から方向が変わる） ⇒例えば、上のサンプルで、５を見逃したら、ボタンを押す（あるいはマウスオン）で回転方向が逆になって、５が左から出てくる　という感じです。２．早送り、巻き戻し　など、スクロールの速度も変更できる。　３や４が表示されているとき、ボタンやマウスオンで、動きが早くなって、９や10まで素早く移動できるという感じです。そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか？ jcarousellite　の改造方法でもけっこうです。スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite　のように簡単に指定できると、たいへん助かります。

jQueryのタブにスクロールバーをつけたい

jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？

スライドショーについて

ど～もど～も。よろしくです。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> 長くなっちゃってごめんなさい。困っているので、お願いします。

画像スライドショー用のjQueryを埋め込みたい

画像スライドショー用のjQueryを埋め込みがしたいです。埋め込みたい物は以下のサイトの物です。 http://www.zurb.com/playground/orbit-jquery-image-slider ここの本文にもあるのですが私の思う通りにまずは記載します。 header部分に <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/orbit.css"> を記載し埋め込みたい場所に <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" /> <img src="features.jpg" alt="and more features" /> </div> を記載するまではわかるのですが、 <script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script> はどこに記載するのでしょうか？？またデレクトリーはどこにいれればいいのでしょうか？？基礎的な質問で申し訳ございませんが、教えて頂ける方宜しくお願い致します。

qtipの使い方について

qtipのデモを参考に画像の表示まではできたのですが複数の画像を指定する事ってできないでしょうか？ http://craigsworks.com/projects/qtip/demos/content/images 具体的には・・・ <div id="content" class="default"> <ul> <li><a href="#">1の画像</a></li> <li><a href="#">2の画像</a></li> <li><a href="#">3の画像</a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function() { $('#content a[href]').qtip({ // ここで1の画像、2の画像、3の画像を指定したいのですが方法がわかりません。試しに以下のようにしてみましたが当然の事ながら3の画像が適応されます。 content: '<img src="1.jpg" alt="1の画像" />' content: '<img src="2.jpg" alt="2の画像" />' content: '<img src="3.jpg" alt="3の画像" />' }); }); </script> <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script> #content内でそれぞれの画像を指定するにはどうすればいいでしょうか？宜しくお願い致します。

galleryviewのjavascriptについ

下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。 <!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>GalleryView - Default Demo</title>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>  <script type="text/javascript" src="../js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>  <script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script> <link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" />  <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script> </head> <body> <ul id="myGallery"> <li><a href="http://ariacompany-since2010.com/shop/products/list.php?category_id=47"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" /> </ul> <p>Please view the source of this page if you are having difficulties setting up GalleryView.</p> </body> </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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>jquery-galleryview-2.1.1</title> <link rel="stylesheet" href="css/jquery.galleryview-3.0.css" /> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.4"); </script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.galleryview-3.0.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $('#gallery').galleryView({ panel_width: 450, panel_height: 300, frame_width: 90, frame_height: 60 }); }); </script> </head> <body onLoad="location.reload(true)"> <ul id="gallery"> <li><img src="http://lorempixum.com/450/300/people/1" /></li> <li><img src="http://lorempixum.com/450/300/people/2" /></li> <li><img src="http://lorempixum.com/450/300/people/3" /></li> <li><img src="http://lorempixum.com/450/300/people/4" /></li> <li><img src="http://lorempixum.com/450/300/people/5" /></li> <li><img src="http://lorempixum.com/450/300/people/6" /></li> <li><img src="http://lorempixum.com/450/300/people/7" /></li> <li><img src="http://lorempixum.com/450/300/people/8" /></li> </ul> </body> </html> というページがございまして。親ページで tickboxを開くぼたんを押すとこのページがでる仕組みなんですが、 Firefoxのみ表示されません透明のこのページがでて、作動はしてるのですが。画像まで読み込みしません。それで、onLoad="location.reload(true)" を入れたのですが、無限ループ。これを１回で終らせる方法、および、別の方法ご存知の方いらっしゃると信じて投稿です。どうか、教えてください。親ページでやる方法があればそれでもかまいません。まだまだ経験不足で、よろしくお願いいたします。

このjqueryが稀に動かない

画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });

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です。どなたか、ご助力をお願い致します。

jQueryのroundaboutで画像挿入の際IEでの不具合について。

みんなの回答

関連するQ&A

jQueryのroundaboutで画像挿入の際IEでの不具合について。

bxsliderが動かない

jQuery Cycle Plugin のナビ

AIは使う人の年齢や市場にも影響する？人工知能の可能性

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

画像をランダムにフェードイン

【Jquery】before()でソースを挿入

jQueryについて

Jqueryスライダーが動きません。

jquery.mobile　画像を中央に表示

Jqueryスライドが動きません。教えてください

jQueryの導入方法について

画像／文字をスクロールさせるスクリプト

jQueryのタブにスクロールバーをつけたい

スライドショーについて

画像スライドショー用のjQueryを埋め込みたい

qtipの使い方について

galleryviewのjavascriptについ

ご教授ください。

このjqueryが稀に動かない

jquery.bgSwitcherが設置できない

注目のQ&A

カテゴリ

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

専門家に質問してみよう

jQueryのroundaboutで画像挿入の際IEでの不具合について。

みんなの回答

関連するQ&A

jQueryのroundaboutで画像挿入の際IEでの不具合について。

bxsliderが動かない

jQuery Cycle Plugin のナビ

AIは使う人の年齢や市場にも影響する？人工知能の可能性

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

画像をランダムにフェードイン

【Jquery】before()でソースを挿入

jQueryについて

Jqueryスライダーが動きません。

jquery.mobile 画像を中央に表示

Jqueryスライドが動きません。教えてください

jQueryの導入方法について

画像／文字をスクロールさせるスクリプト

jQueryのタブにスクロールバーをつけたい

スライドショーについて

画像スライドショー用のjQueryを埋め込みたい

qtipの使い方について

galleryviewのjavascriptについ

ご教授ください。

このjqueryが稀に動かない

jquery.bgSwitcherが設置できない

注目のQ&A

カテゴリ

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

専門家に質問してみよう

jquery.mobile　画像を中央に表示