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

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

行動規範の内容に同意します

回答2件

ベストアンサー

自分の手元で確認してみたところ、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> ```

行動規範の内容に同意します