複数のjquery pngアニメを同ページ内に配置する際の問題と解決方法

前へ 次へ
このQ&Aのポイント
  • 複数のjquery pngアニメを同ページ内に配置する際に問題が発生しています。アニメーション1が23×23個表示され、アニメーション2が表示されません。解決方法としては、アニメーション1とアニメーション2の間に適切な文言が記載されていない可能性があります。また、javascriptの記述が重複しているため、変数や関数名を一意にする必要があります。
  • 同じページ内に複数の異なるjquery pngアニメーションを配置すると、うまく表示できない問題が発生しています。アニメーション1が正しく表示されず、アニメーション2も表示されなくなります。解決方法としては、各アニメーションの変数や関数名を一意にする必要があります。また、アニメーションの順序を正しく配置する必要もあります。
  • 複数のjquery pngアニメーションを同ページ内に配置する際に問題が発生しています。アニメーション1が23×23個表示され、アニメーション2が表示されません。解決方法としては、各アニメーションのidや変数名が重複しているため、一意にする必要があります。また、アニメーションの順序を正しく配置する必要もあります。
回答を見る
  • ベストアンサー

jQuery pngアニメを同ページ内に複数配置

よろしくお願いいたします。 http://blog.rettuce.com/animation/animation-jpg/ こちらを参考に、jquery＋png画像でgifアニメのようなアニメーションを作成しています。 サンプルの通りに作成すると問題なくアニメーションになっているのですが、 同じページ内に複数の異なるアニメーションを配置すると、うまく表示できず、おかしな動作になります。 javascriptは以下のように記述しています。 //アニメーション1 <script type="text/javascript">var id = "test1"; var width = 50; var height = 50; var fps = 10; var src = "test1.png"; var frame = 0; var max_frame = 10; var onceFlg = false; $(document).ready( function (){ $("#"+id).css({ "background":"url("+src+")", "width":width, "height":height }); var interval = 1/fps*1000; animation = setInterval(intervalEvent, interval); }); function intervalEvent(){ $("#"+id).css({ "background-position":"0 "+ -height * frame +"px"}); frame++; if(frame>=max_frame){ if(onceFlg) clearInterval( animation ); frame = 0; }; } </script> //アニメーション2 <script type="text/javascript"> var id2 = "test2"; var width = 500; var height = 300; var fps2 = 5; var src2 = "test2.png"; var frame2 = 0; var max_frame2 = 5; var onceFlg2 = false; $(document).ready(function (){ $("#"+id2).css({ "background":"url("+src2+")", "width":width, "height":height }); var interval2 = 1/fps2*1000; animation2 = setInterval(intervalEvent2, interval2); }); function intervalEvent2(){ $("#"+id2).css({"background-position":"0 "+ -height * frame2 +"px"}); frame2++; if(frame2>=max_frame2){ if(onceFlg2) clearInterval( animation2 ); frame2 = 0; }; } </script> ------- それぞれ、一つずつ記述したときは、どちらも想い通りに動くのですが、 両方記述した際に、以下の２点のようになります。 1.アニメーション1が23×23個表示される 　■　←これをアニメーションだとすると、 ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ 　　　　・ 　　　　・ 　　　　・ という風に表示されます。 2.上記のjavascriptの記述のアニメーション1とアニメーション2の順序を入れ替えると、 　アニメーション1は正しく表示され、アニメーション2が表示されなくなります。。 それぞれ個別では動いているので、複数配置するときのjavascriptの書き方が間違っているのかと思うのですが、 原因をもしご存知でしたらお教えいただきたいと思い、質問させていただきました。 どうぞよろしくお願いいたします。

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

  • ベストアンサー
  • medal
  • ベストアンサー率100% (3/3)
回答No.4

無駄なローカル変数を整理しました。 ===================== javascript ===================== <script type="text/javascript"> $(function(){ /* 関数定義 */ var animeSprite = function ( $id, $fps, $src, $max, $flg ) { var w = $($id).width(); var h = $($id).height(); var frame = 0; $($id).css({ "width": w, "height": h, "background-image": "url('"+$src+"')", "background-repeat": "no-repeat" }); var interval = (1/$fps)*1000; var animation = setInterval(function () { $($id).css({ "background-position": "0 " + (-h * frame) + "px" }); frame++; if(frame >= $max){ if($flg) clearInterval( animation ); frame = 0; } }, interval); }; /* 実行 */ animeSprite( "#sprite1", 10, "./img/test1.png", 10, false ); animeSprite( ".sprite2", 5, "./img/test2.png", 5, false ); }); </script>

pencil87
質問者

お礼

こちらも、ありがとうございます！ 奇麗なソースを書くのって難しいですね。。 参考にさせていただきます。

その他の回答 (3)

  • medal
  • ベストアンサー率100% (3/3)
回答No.3

値が色々干渉しているんでしょうね。 同じような処理の重複は事故やメモリロスの元なので、ご提示いただいたサイトのスクリプトを関数化してみました。対象要素は、id、class両方に対応しています。 表示サイズはcssから取得しています。また、関数のオプションは以下の通りです。 animeSprite( "動かしたい対象要素", 秒何枚動かすのか, "画像のパス", 最大フレーム数, ループフラグ ); ===================== CSS ===================== <style type="text/css"> #sprite1 ｛ width:50px; height:50px; ｝ .sprite2 ｛ width:500px; height:300px; ｝ </style> ===================== javascript ===================== <script type="text/javascript"> $(function(){ /* 関数定義 */ var animeSprite = function ( $id, $fps, $imgsrc, $max, $flg ){ var w = $($id).width(); var h = $($id).height(); var fps = $fps; var src = $imgsrc; var frame = 0; var max_frame = $max; var loopflg = $flg; $($id).css({ "width": w, "height": h, "background-image": "url('"+src+"')", "background-repeat": "no-repeat" }); var interval = (1/fps)*1000; var animation = setInterval(function (){ $($id).css({ "background-position": "0 " + (-h * frame) + "px" }); frame++; if(frame >= max_frame){ if(loopflg) clearInterval( animation ); frame = 0; } }, interval); }; /* 実行 */ animeSprite( "#sprite1", 10, "./img/test1.png", 10, false ); animeSprite( ".sprite2", 5, "./img/test2.png", 5, false ); }); </script> ===================== HTML ===================== <body> <div id="wrapper"> <div id="sprite1"></div> <div class="sprite2"></div> <!--// #wrapper end //--></div> </body>

参考URL：
http://blog.rettuce.com/animation/animation-jpg/
pencil87
質問者

お礼

ご回答ありがとうございました。 お礼が遅くなり、申し訳ありません。 やはり書き方がいろいろややこしく書いてしまっていたのですね。 とても参考になりました！

回答No.2

$(function(){ $('動かしたい対象').animate({"bgpos":フレーム数},{step:function(t){ $(this).css("background-position","0px -"+Math.floor(t).height())+"px"); }) }) 自分で書いといてアレだけどこっちの方が効率良いですね ってか最終的にこうしたんだった、忘れてた ちなみにjqueryのプラグインでbackgroundPositionってのがあって これいれとくとbackgroundPositionパラメータをアニメーションしたりとかすると background-positionが動かせるようになります スプライトアニメーションだけが目的なら正直上記ぐらいのコードなんで 別にプラグインまで入れる事ないかなとも思いますが あ、jqueryの日本語サイトでstepの第一引数が０～1とかいってるけどあれ嘘ですよ アニメーションするパラメータが一つの場合限定かもしれないけど フレーム数に24とか入れれば0～24、結果の数値が入ってきます、 少なくともウチの環境ではいずれもそうでした jqueryの計算の問題だから多分ブラウザによって違うってこともないと思います

pencil87
質問者

お礼

こちらも、ありがとうございます。 とても参考になりました。

回答No.1

animate()のstep使うといいよ、コードも少なくて済むし stepには第一引数に結果の数値が入ってくるので その数値を利用してスプライトにしてやればいい $(function(){ $('動かしたい対象').animate({"bgpos":画像全体の高さ-ボックスの高さ},{step:function(t){ $(this).css("background-position","0px -"+(t-t%$(this).height())+"px"); }) }) そんなカンジ

参考URL：
http://semooh.jp/jquery/api/effects/animate/params%2C+options/
pencil87
質問者

お礼

ご回答ありがとうございました。 お礼が遅くなり、申し訳ありません。

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

関連するQ&A

  • 同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> <!-- END #gnav --> <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><!-- END wrap --> <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> <!-- END #wrap --> </body> </html>

  • 同一ページ内の複数のタグに同一のJQueryを実行

    JQuery初心者です 同一ページ内にサムネイル付ギャラリーを複数作り、 ギャラリーごとに横にスクロールする形で作っています。 今の状態ですと、1ページ目は正常動作で問題はありません。 ただ、1ページ目のJQuery処理前に<a href="#pege2">ページ2へ</a>で2ページ目にスクロールすると、2ページ目のメイン画像抜けてしまいます。 恐らく、前ページでのJQueryの処理が終了してないからだと思います。しばらくすると 前ページの処理が終了し2ページ目のメイン画像に反映されます。 これをどうにか<section id="pege●">ごと、もしくは<a href="#pege●">ページ●へ</a>をクリックしたらJQueryが実行する事が出来ないでしょうか？ 色々調べてみましたが、出来ませんでした。 ご享受の程、宜しくお願いいたします。 参照ページ（http://www.tam-tam.co.jp/tipsnote/javascript/post68.html） html（こんな感じで作ってます） <article> <section id="pege1"> <section id="view"><!-- メイン画像--> <p><img src="images/big_a01.jpg" width="" height="" alt="" /></p> <p><img src="images/big_a02.jpg" width="" height="" alt="" /></p> </section> <ul id="thumbBtn"><!-- サムネイル画像--> <li><img src="s_a01.jpg" width="" height="" alt="" /></li> <li><img src="s_a02.jpg" width="" height="" alt="" /></li> </ul> <div id="details"><!-- 説明--> <h2>説明文</h2> <p><a href="#pege2">ページ2へ</a></p> </div> </section></section> <section id="pege2"> <section id="view"><!-- メイン画像--> <p><img src="images/big_b01.jpg" width="" height="" alt="" /></p> ・以下同じ <p><a href="#pege3">ページ3へ</a></p> </section></section> <section id="pege3"> ・以下同じ </section></section> </section> </article> JQueryの記述は次の通りです。 <script type="text/javascript"> $(function (){ //設定 var active="active",interval=5000; var index=0, timerId=null; var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li"); tabs.each(function(){$(this).removeClass(active);}); content.hide(); cap.hide(); tabs.eq(0).addClass(active); content.eq(0).fadeIn(0); cap.eq(0).fadeIn(0); //クリックされたらactiveというクラスを付与、 //切り替え、タイマーをリセット tabs.click(function(){ if($(this).hasClass("active")) return; if(timerId) clearInterval(timerId),timerId=null; change(tabs.index(this)); setTimer(); return false; }); //タイマー setTimer(); function setTimer(){ timerId=setTimeout(timeProcess,interval); return false; } function timeProcess(){ change((index+1)%tabs.length); timerId=setTimeout(arguments.callee,interval); } //切り替え function change(t_index){ tabs.eq(index).removeClass(active); tabs.eq(t_index).addClass(active); //fadeout setTimeout(function(){ content.eq(index).stop(true, true).fadeOut(0), cap.eq(index).stop(true, true).hide() ;}, 0); //fadein setTimeout(function(){ index=t_index; content.eq(index).fadeIn(0), cap.eq(index).fadeIn(0) ;}, 0) } }); </script>

  • 同HTML内で複数のjQueryを設置する方法

    複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。

  • jQueryでスマホ向けページのロールオーバー

    スマートフォン向けページで、記事をタップすると その記事にグレーのオーバーレイがかかり、 指が外れるとオーバーレイが消える効果をつけたいと思います。 CSSだけでは難しそうでしたので、jQueryで空のdivを作成する 方法を考えました。 背景を透過した空のdivを生成するところまではできたのですが、 それを外すことがどうしてもできません。 Javascriptの基本的な文法がわかっていないせいだと思います…。 下記がうまく行かなかったソースです。 removeの記述に問題があるのだと思いますが ご教授の程よろしくお願い致します。 また、この程度JSを使わなくてもCSSだけでできるようでしたら その方法でもかまいませんので教えていただければと思います。 ■JS <script> $(function($){ $( "#hoge a" ) .bind( 'touchstart', function(){ $( this ).prepend( "<div></div>" ); }).bind( 'touchend', function(){ $( this ).unbind(); }).bind( 'touchend', function(){ $( "<div></div>" ).remove( ); }) }); </script> ■HTML <section id="hoge"> <a href="#"> <article> <figure><img src="image.png" width="100" height="120"></figure> <p>テキストテキスト</p> </article> </a> </section> ■CSS #hoge article { position: relative; } #hoge article figure { z-index: 1; } #hoge a div { background-color: #000; opacity: 0.3; width: 100px; height: 150px; position: absolute; top: 0; left: 0; z-index: 2; }

  • JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右

    JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置しようと考えています。 以下のようなコードを作成したのですが、firefox(3.6.3)だとmouseupによるmousemoveのunbindがうまくいかず、mousemoveが維持されます。 IE8、chrom、operaでは考えたとおりの動きをしますが、ときたまchromでfirefoxと同様の不具合がおきます。 どのようにコードを修正すればよいでしょうか？ ------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> <!-- div#frame1{ position : absolute; height : 360px; width : 240px; top : 0; left : 0; border : 5px solid #000FFF; } div#frame1 img#handle{ position : absolute; bottom : 0; right : 0; border : 5px solid #FFF000; } //--> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("img#handle").mousedown(function(e){ $("#frame1") .data("mdownX" , e.clientX) .data("mdownY" , e.clientY); $(document).mousemove(function(e){ var width = parseInt($("div#frame1").css("width"),10); var height = parseInt($("div#frame1").css("height"),10); $("div#frame1").css({ width : width + (e.pageX - $("#frame1").data("mdownX")) + "px", height : height + (e.pageY - $("#frame1").data("mdownY")) + "px" }); $("#frame1") .data("mdownX" , e.pageX) .data("mdownY" , e.pageY); }); }); $(document).mouseup(function(){ $(document).unbind("mousemove"); }); }); //--> </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>

  • DIVで同一ページ内にポップアップってできる？？

    普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？？ 画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。 それを立ち上げるのを画像ではなくhtmlにしたいんです。 ----ソース---- 【HTML】 <div id="pWindow" style="position:absolute; visibility:hidden; width:100%; height:100%;"> <table style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" valign="middle"> <table style=" background-color:#FFF; border:1px solid #000;" border="0" cellspacing="15" cellpadding="0"> <tr><td align="center" valign="middle"> <img src="img/loading.gif" width="400" height="300" id="lPhoto"> </td></tr> <tr><td align="center" valign="middle"> <a href="javascript:cls()"><img src="img/close.gif" width="53" height="17" border="0"></a> </td></tr> </table> </td></tr> </table> </div> 【JavaScript】 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = "img/loading.gif"; } 分かる方、お忙しいところ申し訳ないんですがご教授ください！！

  • ページ内に複数の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><!-- #galleria --> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay1 --> <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><!-- #galleria --> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay2 --> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <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>

  • 同一ページ内にスワップイメージを複数セット設置したい

    はじめまして。 カラーミーというショップシステムを使ってネットショップを作っています。 その中で作品ごとに色々な角度で見れるようなギャラリーページのようなものを作っています。 下のサイトと同様な動きです。 http://shailoh.co.jp/pg.html 単一のスワップイメージはできたのですが 同一ページ内に同様の処理を行うスクリプトを複数セット配置する方法がわかりません。 あまり詳しくないので単純にIDを振り分ければいいのかと思っていたのですが 処理がかぶっているせいか動きませんでした。 どなたかお分かりになる方がいたら教えていただきたいです。 ---HTML記述----------------------------------------------------------------- <img src="imgs/01/01.gif" width="480" height="320" id="image"/> <BR><BR> <img src="imgs/01/01_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/01.gif');"/> <img src="imgs/01/02_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/02.gif');"/> <img src="imgs/01/03_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/03.gif');"/> <img src="imgs/01/04_s.gif" width="50" height="50" onmouseover="SwapImage('imgs/01/04.gif');"/> ---Javascript記述----------------------------------------------------------------- // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = '../imgs/01/01.gif'; clearTimeout(timer); } --------------------------------------------------------------------------------- 上記のHTML記述部分を1セットとして複数同じようなものを作りたいのです。 処理は全て同じで、サムネごとにスワップ先を変えることはできないのでしょうか。 カラーミーの仕組み上、フリーで使えるページ数を抑えなくてはいけないので 作品ごとにページを振り分けることができず困っています。 色々調べたのですが分かりませんでした。 どなたかお分かりになる方がいたらアドバイスをお願いいたします。

  • 同HTML内で複数のjQueryを設置する方法

    Movable Type５で作製しています。 複数のjQueryを使用し、（Ａ）はヘッダーにメニュー、（Ｂ）はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとＢのみが作動する状態です。 jQueryもｊｓもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません（同様の質問なのかも不明ですが・・・） 本当にわからないので、宜しくお願いします。

  • 複数のjqueryを入れると動かなくなる

    今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い（？）か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです：http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する