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

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

ただいまの
回答率

89.87%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 43

tanakahanako

score 1

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

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

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

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

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

ソースコード(HTML)

<!----------ポップアッププラグイン---------->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script>
<!--gif動画再生ボタンプラグイン-->
<script type="text/javascript" src="http://krasimir.github.io/gifffer/lib/gifffer.js"></script>
<script type="text/javascript">
     window.onload = function() {
        Gifffer();
     }
</script>


<a href="(gif動画のURL)"data-lity="data-lity" data-gifffer="data-gifffer" style="border: none;">
 <img src="(画像のURL)" width="25px" ; class="f-001"/></a>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

  • 画像をクリックしたらポップアップ
  • ポップアップ時にGIF画像を最初から表示
<!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>
    </head>
    <body>
        <a href="test.gif" data-lity="data-lity">
            <img src="test.gif">
        </a>
    </body>
</html>

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

<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" class="target">
</a>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 15: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動画は最初に戻ってくれません。。。

    キャンセル

  • 2020/01/15 19:46 編集

    了解致しました。
    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>
    ```

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 12:00

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

    キャンセル

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

  • ただいまの回答率 89.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる