• 締切済み

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

【参考サイト】 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> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか？ よろしくお願いします。

  • bntt
  • お礼率60% (3/5)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

#2です。 ＞cssを完全に取り除き、文字だけの表示にする方法がよくわからない それって、javascriptではなくて、HTMLとCSSの問題では？ 単純に取り除きたいのなら、CSSを適用させているmetaタグを取り除けばすみませんか？ 当然の結果として、レイアウトや見え方は変わりますが…

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 ＤＬして試してみましたが、問題なく動作するようです。 以下を再確認してください。 1）ＨＴＭＬ、及びスクリプトの文法上の間違いの修正。 　・タグの不整合、タイポ 　・括弧の不整合 　・余分な「,」 など 2）初期設定で、参考サイトのように画像を非表示にする。 ＤＬするとindex.htmlがサンプルにあると思いますが、それがまず動作することを確認してください。 次にそのファイルをコピーし、少しづつ修正しながら、動作することを確認してください。 動作しなくなったら、その一歩手前からの修正がおかしいので、一歩手前からやりなおしてください。

bntt
質問者

お礼

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="title" content="champagne.js by fresh tilled soil" /> <meta name="author" content="fresh tilled soil" /> <meta name="description" content="A jQuery plugin to randomize the display of objects in a grid." /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>champagne.js | fresh tilled soil</title> <link rel="stylesheet" type="text/css" href="demo.css" /> <link rel="stylesheet" type="text/css" href="champagne/champagne.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <script type="text/javascript" src="http://use.typekit.com/obk6jbp.js"> </script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> <body> <div class="container"> <h1>champagne.js</h1> <h2></h2> <nav> <a class="button" href="https://github.com/freshtilledsoil/champagne/zipball/master">Download from Github</a> <ul> <li></li> <li></li> </ul> </nav> <ul class="champagne"> <li>hello</li> <li>hola</li> <li>bon giorno</li> <li>ni hao</li> <li>guten tag</li> <li>namaste</li> <li>hello</li> </ul> </div> <!-- end .container --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="champagne/jquery.champagne.min.js"></script> <script type="text/javascript"> $(function() { $("ul.champagne").champagne(); // Demo $("#view-images").click(function() { if (!$(this).hasClass("active")) { $("#view-text").removeClass("active"); $(this).addClass("active"); $("ul.champagne li").each(function() { $(this).css({height: 70, padding: 0, width: 190}).addClass($(this).text()).contents().remove(); $(this).append("<img src='http://placehold.it/188x68/fafafa/999' alt='Image' />"); }); $("ul.champagne").champagne(); } }); $("#view-text").click(function() { if (!$(this).hasClass("active")) { $("#view-images").removeClass("active"); $(this).addClass("active"); $("ul.champagne li").each(function() { $(this).removeAttr("style").contents().remove() $(this).append($(this).attr("class")).removeAttr("class"); }); $("ul.champagne").champagne(); } }); }); </script> </body> </html> indexから改変したものです。 ランダム表示は出来るのですがcssを完全に取り除き、 文字だけの表示にする方法がよくわからないのでご教授いただければと思います。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

試していませんが… ご提示の参考サイトの中ほどに 　　『でひとまずこれらの要素に対して非表示する指定を加えておきます』 とあるように、初期設定で非表示の処理が必要なのではないでしょうか？ あとは、重複してchampangneの指定をしているみたいですが、不要なのでは？ また、そのあたりのタグがおかしくなっているようですが…

bntt
質問者

お礼

仰られた通りに打ち直してみましたがうまく作動しませんでした。 ご指摘ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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とprototypeの共存

    prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { 　　　　jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>

  • jQueryでプルダウンメニュー

    jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </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.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> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • ランダムなフェードインを作りたいです。

    jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>

    • ベストアンサー
    • AJAX
  • 3枚の画像をフェードイン

    3枚の画像を順番にフェードインさせたいのですが、ＩＥで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかＩＥ対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。 ソースは下記になります。 最初のパッと画像が現れる原因と対策を教えてください・・・！ <script type="text/javascript"> $(function(){ 　$('#fade li').hide(); }); $(window).bind("load", function(){ 　var interval = 400; //表示間隔 　for(var i=0; i<$('#fade li').length; i++) 　　setTimeout(doFade(i), interval * i); 　function doFade(i){ 　　return function(){ $('#fade li').eq(i).fadeIn(2000); }; 　} }); </script> 【ＨＴＭＬ】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>

  • 画像をフェードアウト＆フェードインで切り替えたい

    jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ 　$("#cat-list a").click(function(){ 　　$("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); 　　$("p#cat-name").text($(this).text()); 　　return false; 　}); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> 　<li><a href="images/cat01.jpg">ネコ1</a></li> 　<li><a href="images/cat02.jpg">ネコ2</a></li> 　<li><a href="images/cat03.jpg">ネコ3</a></li> 　<li><a href="images/cat04.jpg">ネコ4</a></li> 　<li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。

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

    表題の通り、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"> <!-- $(function() { $(".carousel").jCarouselLite({ auto: 800, speed: 2000, visible: 5, btnNext: ".next", btnPrev: ".prev", }); }); //--> </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 どなたかわかる方がいましたら教えてもらえないでしょうか？？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する