質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1538閲覧

jQueryの「Lity」・「gifffer」を使用して、GIF動画をポップアップ・再生を制御したい

tanakahanako

総合スコア11

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/01/15 02:09

編集2020/01/15 02:11

jQueryの「Lity」・「gifffer」を使用して、
画像をクリックしたら自作のGIF動画をポップアップ、ポップアップ時に
GIF動画を初めから再生させたいと思っております。

Lityだけのコードでは、
裏でGif動画が動いてしまうようで、クリックの度に初めから再生とはいかないようです。。

同じコードをサイト内の色々なページで使用して、どこでも同じ動きにしたいです。
毎回ポップアップ後の動画を始めから再生するには、どのように処理すれば良いかご教授頂けますと幸いです。

このような動作になれば、「Lity」・「gifffer」の使用にはこだわりませんが、
cssファイルの読み込みができない仕様なので、HTMLにすべて記述できる形で作りたいです。

自学の初心者で大変恐縮ですが、宜しくお願いいたします。

#ソースコード(HTML)

lang

1 2<!----------ポップアッププラグイン----------> 3<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' /> 4<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script> 5<!--gif動画再生ボタンプラグイン--> 6<script type="text/javascript" src="http://krasimir.github.io/gifffer/lib/gifffer.js"></script> 7<script type="text/javascript"> 8 window.onload = function() { 9 Gifffer(); 10 } 11</script> 12 13 14<a href="(gif動画のURL)"data-lity="data-lity" data-gifffer="data-gifffer" style="border: none;"> 15 <img src="(画像のURL)" width="25px" ; class="f-001"/></a> 16 17

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

自分の手元で確認してみたところ、lityだけでも問題ないように見えます。Chromeでの確認ですが。
なおgiffferも入れたい場合はちょっと手元で両立させることはできなかったので、asuchi0819さんがご提示したような別のライブラリを使用することも検討する必要があるかもしれないです。

  • 画像をクリックしたらポップアップ
  • ポップアップ時にGIF画像を最初から表示

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css" /> 7 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js"></script> 9 </head> 10 <body> 11 <a href="test.gif" data-lity="data-lity"> 12 <img src="test.gif"> 13 </a> 14 </body> 15</html>

なおポップアップした画像が最初からアニメーションされない事象が改善されない場合は、せこいやり方ではありますがポップアップしたGIF画像のsrcをちょっといじってあげればいけるのではないかと思います。
※挙動がうまくいくかは確認できていないので保証はできないです。申し訳ないです。

html

1<script type="text/javascript"> 2 $('.target').on('click', () => { 3 $('.lity img').src = 'test.gif' + String(new Date); 4 }); 5</script> 6 7... 8 9<a href="test.gif" data-lity="data-lity"> 10 <img src="test.gif" class="target"> 11</a>

投稿2020/01/15 03:13

vnsa7221

総合スコア348

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanakahanako

2020/01/15 06:01

回答ありがとうございます! 私もChromeで動作を試していますが、 Lityだけでは、途中で一旦ポップアップを解除し、 もう一度クリックした時に前回の途中(?)から始まってしまいます。。 #ソースコード(HTML) ```lang-HTML <script type="text/javascript"> $('#target').on('click', () => { $('.lity img').src = 'test.gif' + String(new Date); }); </script> ... <a href="test.gif" data-lity="data-lity"> <img src="test.gif" id="target"> </a> ``` 画像はすでにclass名をつけていましたので、 idで教えていただいた通り作成したのですが、やはりGIF動画は最初に戻ってくれません。。。
vnsa7221

2020/01/15 10:47 編集

了解致しました。 gif動画を最初から再生させる場合、lityでポップアップさせる際に新しいGIF動画であることを認識させれば前回までの分を引き継ぐことなく最初から動くようになるはずなので、srcをうまく変化させればできるはずです。ただ相当の力技になり、オススメはしないです。 DOMの変更を監視して変更された場合ポップアップのGIF動画が存在していたらそれを書き換えるようにさせればもしかしたら動いてくれるかもしれないです。もっと良い方法があると思いますが・・・。 以下コードではどうなるでしょうか? ```html <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css" /> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js"></script> <script type="text/javascript"> $(function() { $('#test').on('click', () => { var observer = new MutationObserver(function() { if($('.lity img').length > 0){ $('.lity img').attr('src', 'test.gif?' + Math.random().toString(36).slice(-8)); observer.disconnect(); } }); const elm = $('body'); const config = { childList: true, subtree: true }; observer.observe(elm[0], config); }); }); </script> </head> <body> <a href="test.gif" data-lity="data-lity"> <img src="test.gif" id="test"> </a> </body> </html> ```
guest

0

ライブラリだけのご紹介ですが、こちらはいかがでしょうか?

投稿2020/01/15 02:12

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanakahanako

2020/01/15 03:00

ご回答ありがとうございます! 知識不足で申し訳ございません。。 ご紹介いただいたページの「freezeframe.min.js」ですが、 外部ファイルとして置くことができません。。 HTML内で完結させることはできますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問