なぜjsで書き出したソースのみアニメーションがつかないのか？
- 書き出されたコードにアニメーションをつけたいが、jsで書き出したソースのみアニメーションがつかない理由を知りたい。
- Google Feed APIを使ってRSSから写真を取得し、lightbox系のアニメーションを追加したいが、上手くいかない。
- 直接htmlに書くとlightbox系のアニメーションがつくが、jsで書き出したソースではアニメーションがつかない理由は何か。
- ベストアンサー
書き出されたコードにアニメーションつけたい
https://dl.dropbox.com/u/63681173/001/index.html 編集中のソース↑ Google Feed APIを使ってRSSから取得した写真にlightbox系のものを入れたいのですがどうもうまく行かないです。 jsで書き出したソースをブラウザの開発ツールでコピーしたのが下のソースですが、これを直接htmlに書くとlightbox系のアニメーションがつきました。 --------------------------------------------------------- <div class="box"> <a href="http://distilleryimage7.s3.amazonaws.com/a083bd3672b411e2b0f722000a9f18db_6.jpg" class="swipebox"> <img src="http://distilleryimage7.s3.amazonaws.com/a083bd3672b411e2b0f722000a9f18db_6.jpg"> </a> </div> --------------------------------------------------------- jsで書き出したソースのみアニメーションがつかないのはなぜでしょうか？ http://wp.7zz.jp/news/ajax/2447.html http://brutaldesign.github.com/swipebox/
- blo198
- お礼率10% (7/67)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
書きだした要素は登録されてないから jQuery(function($) {})内に書くのはやめて ひと通り書きだした後に $(".swipebox").swipebox({useCSS : true,hideBarsDelay : 3000}); すればいいよ
関連するQ&A
- cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】 【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】 【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】 【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; top: 5%; left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; opacity: 0; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 5% { opacity: 1; transform: translate3d(0, 0, 0); } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 101% { opacity: 0; transform: translate3d(0, 0px, 0); } 102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>
- ベストアンサー
- HTML
- Codepenのコードについて
「Codepen」 というwebデザインのサイトについて質問があります。 素敵なメニューがあるので自分のサイトにも使いたいのですが、フリー版で登録してファイルをDLしてみたところ、サイトで見ている状態にはなりませんでした。サイト自体をDLしてみたところ、ベンダープレフィックスの記述もあったり別の javascript も記載されており大分違っていました。 HTML と CSS と JS だけで作成されていると記載されていますが、実は jquery を利用していたり、記載に無い別の javascript を利用しているようです。 アイコンなどは削除してコードを最低限にスリム化したいのですが、頁をまるごとDLしても元のサイトのような動きや表示をしないので困っています。 ＜質問の頁＞ https://codepen.io/kieranfivestars/pen/JdbPBv https://cdpn.io/kieranfivestars/fullpage/JdbPBv# ＜必要と思われる頁など（全て同じディレクトリに入れています。）＞ (1) index.html（大元の頁） (2) font-awesome.min.css（これは削除してもOK？） (3) jquery.min.js（必要みたい） (4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい） 以下はhtmlからも削除しました。 (5) fontawesome-webfont.svg (6) favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico DLしたフォントは font というフォルダの中に入れています。 ウェブ上の頁とDLしたファイルのコードに違いがありましたので少し直したところ 見た目は動くようになりました。しかし横三本線のメニューの表示が少しおかしいです。（DLしたファイルでは <ul class="open"> の classの指定がされていませんでしたので追加しました。） (2) font-awesome.min.css は削除すると、上下に動くハンバーガーメニューが止まってしまいました。 ＜補足＞ 以下は必要と思われるファイルのアドレスになります。 (1) index.html（大元の頁） (2) font-awesome.min.css（これは削除してもOK？） https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome... (3) jquery.min.js（必要みたい） https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js (4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい） https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e... ●他に多数のフォントファイルもDLできました。必要なのかもしれませんが、ディレクトリは font という別のフォルダに入れたいので、 もしかしたら、font-awesome.min.css の中の url にディレクトリ名を追加しないといけないのかもしれません。 アイコン画像やsvgも一応保存しています。 今の状態のファイルは以下にありますので、一度見てもらえますとありがたいです。 ７日間保存されています。 https://firestorage.jp/download/b19a1219f4ffb04658781c5d4892f410d8e59475 短縮URL https://xfs.jp/jSR7aT できるだけ必要のないコードは削除してシンプルにしたいと思っています。 出来れば CSS や javascript ファイルは外部タイプにして html はシンプルにしたいと思っています。 どなたかお知恵を拝借できればと思っております。 よろしくお願い致します。
- 締切済み
- CSS
- 長いHTMLタグとフォルダ名を組み合わせたマクロ
エクセル A1にフォルダ名を入力 「2019」 B1にフォルダ名を入力 「april」 C3にファイル名を入力 「tokyo-minato」 D1にタイトル名を入力 「tokyo」 E1にフォトギャラリーの数 「40」 マクロ実行で以下のようにしたいですが、初心者なので、アドバイスをもらえたらと思います。 宜しくお願いします。 <!-- フォトギャラリー1 --> <div class="ngg-gallery-thumbnail-box ngg-3-columns" > <div class="ngg-gallery-thumbnail"> <a href="http://aaa.com/2019/april/tokyo-minato01.jpg" title="tokyo01"> <img src="http://aaa.com/2019/april/tokyo-minato01.jpg.jpg" width="240" height="160"/></a> </div> </div> <!-- フォトギャラリー2 --> <div class="ngg-gallery-thumbnail-box ngg-3-columns" > <div class="ngg-gallery-thumbnail"> <a href="http://aaa.com/2019/april/tokyo-minato02.jpg" title="tokyo02"> <img src="http://aaa.com/2019/april/tokyo-minato02.jpg.jpg" width="240" height="160"/></a> </div> </div> ・ ・ ・ <!-- フォトギャラリー40 --> <div class="ngg-gallery-thumbnail-box ngg-3-columns" > <div class="ngg-gallery-thumbnail"> <a href="http://aaa.com/2019/april/tokyo-minato40.jpg" title="tokyo40"> <img src="http://aaa.com/2019/april/tokyo-minato40.jpg.jpg" width="240" height="160"/></a> </div> </div>
- ベストアンサー
- Visual Basic
- lightbox2にてちょっとした盗難防止対策の盛り込み。
「Lightbox2」にて表示される写真(画像)にちょっとした盗難対策を盛り込ませようと試行錯誤しているのですが、どうもどこを変更してよいのか分からないのです。 具体的には <div class="スタイルR" style="background-image:URL(写真１.jpg);"> <img src="透明画像.gif" class="スタイルC" /> </div> のようにしたいと思っています。 つまりは、DIVの背景に本来表示させたい画像を表示し、IMGタグにて透明な画像を表示させ、画像を保存しようとすると、透明な画像が保存されるという仕組みです。 簡単はJavascriptでならできるのですが、Lightbox2のように入り組んでいるスクリプトではどこをいじくればよいのか分かりません。 lightbox.jsにて195行目と244～246行目にある、 // <img id="lightboxImage"> var objLightboxImage = document.createElement("img"); objLightboxImage.setAttribute('id','lightboxImage'); objImageContainer.appendChild(objLightboxImage); が表示される画像のIMGタグだと思うのですが、この先がいまいち分かりません。 分かる方がいらっしゃいましたらこの解決策を教えていただけますか？ Lightbox2のサイト： http://www.huddletogether.com/projects/lightbox2/
- ベストアンサー
- JavaScript
- jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
- jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>
- ベストアンサー
- JavaScript
- map とlightbox
以下のようにグーグルマップのように地図上のマークをクリックするとlightboxで画像がでるように したんですが機能しません。この組み合わせはだめなのでしょうか？ 或いは他の方法があるんでしょうか？ 出来ればマークを触れると画像がポップアップする方がいいのですが。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <div><img src="images/map.png" alt="" usemap="#map" border="0"/></div> <div id="gallery"> <map name="map"> <area href="images/jtb.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" /> </map> </div>
- ベストアンサー
- JavaScript
- xhtml+cssでdivをdivで内包する
xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 ｃｓｓハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、ＩＥ７とＩＥ－ＭＡＣが対象のようです。 これと同じような効果が得られるもので、ＩＥ６以降、Ｆｉｒｅｆｏｘ２以降、Ｆｏｄｏｒａそれぞれに対応している方法はありますでしょうか？ 私がどうしたいのか少しわかりにくいかもしれませんが、上記ＵＲＬでどうしたいのかはわかると思います。 アドバイスお願い致します。
- ベストアンサー
- CSS
- タクティカルペンの質問です。
yahoo知恵袋でも質問しました。 私は昨日、yahooショッピングではあるのですが、 http://www.amazon.co.jp/%E3%82%B9%E3%83%9F%E3%82%B9%EF%BC%86%E3%82%A6%E3%82%A7%E3%83%83%E3%82%BD%E3%83%B3-Smith-Wesson%EF%BC%88%E3%82%B9%E3%83%9F%E3%82%B9%EF%BC%86%E3%82%A6%E3%82%A7%E3%83%83%E3%82%BD%E3%83%B3%EF%BC%89-SWPENMPBK-%E3%82%BF%E3%82%AF%E3%83%86%E3%82%A3%E3%82%AB%E3%83%AB%E3%83%9A%E3%83%B3-M-P-%E3%83%9F%E3%83%AA%E3%82%BF%E3%83%AA%E3%83%BC%EF%BC%86%E3%83%9D%E3%83%AA%E3%82%B9-%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF/dp/B003OBMCBW http://i.imgur.com/8tzQWWU.jpg?1 この商品を購入しました。 http://i.imgur.com/FOvscy1.jpg?1 の画像の物が届いたのですが、キャップを開けてみると、 http://i.imgur.com/9hT8sGk.jpg?1 こうなっていました。 これは明らかにおかしいですよね？ amazonの画像は、 http://i.imgur.com/4jCYb40.jpg?1 このようになっていましたし、 取ったキャップに回る変なものがついているのですがどんなに回してもそれを取ることができませんでした。 http://i.imgur.com/YqzBBFu.jpg?1 この画像を見てわかるように、右下のギザギザがついているものです。 これを取れば、本来の形にできると思うのですが、 どうやれば取ることができますか？ わかりやすい取り方をよろしくお願いします。
- ベストアンサー
- ネット通販
- "lightbox"の"CLOSE"ボタンクリック時のページ内ジャンプ
ご質問させてください。 lightboxでオーバーレイ状態が表示された場合、 "CLOSE"ボタンまたは、フェードされた領域をクリックで、 元の画面に戻るかと思います。 このオーバーレイ状態の"CLOSE"ボタンを押した場合、 読み込み元のHTMLに設定されたページ内アンカーへジャンプすることは可能でしょうか？ 以下のソースのように、オーバーレイ状態から"アンカーポイント"へジャンプできればと思っております。 <body> <p><a href="01.jpg" rel="lightbox[photo]" title="コメント"><img src="01_thumb.jpg"></a> <p><a href="02.jpg" rel="lightbox[photo]" title="コメント"><img src="02_thumb.jpg"></a> <p><a href="03.jpg" rel="lightbox[photo]" title="コメント"><img src="03_thumb.jpg"></a> <div style="height:800px"></div> <a name="point" id="point"></a> アンカーポイント </body> "lightbox.js"の100行目付近の記述をカスタマイズすればよいのではと思うのですが、、、 100行："objBottomNavCloseLink.setAttribute('href','#');" ネット上のフォーラムを調べたり、トライアンドエラーを繰り返したのですが、 解決法が見つからなくご質問させていただきました。 よろしくお願いいたします。
- 締切済み
- JavaScript
