From 49f462e6ce329b9c569d4735ab617ac07385b17b Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 30 Jan 2015 10:52:28 +0100
Subject: [PATCH] gifs now restart when their slide container is shown
---
index.html | 3 +++
js/reveal.js | 16 ++++++++++++++++
2 files changed, 19 insertions(+)
diff --git a/index.html b/index.html
index 5b631e9..656c9fc 100644
--- a/index.html
+++ b/index.html
@@ -201,6 +201,9 @@
<pre><code style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
</div>
</section>
+ <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
+ <h2>... and GIFs!</h2>
+ </section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
diff --git a/js/reveal.js b/js/reveal.js
index ad2d5a3..afbfb6e 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -2580,6 +2580,15 @@
currentVideo.play();
}
+ var backgroundImageURL = currentBackground.style.backgroundImage || '';
+
+ // Restart GIFs (doesn't work in Firefox)
+ if( /\.gif/i.test( backgroundImageURL ) ) {
+ currentBackground.style.backgroundImage = '';
+ window.getComputedStyle( currentBackground ).opacity;
+ currentBackground.style.backgroundImage = backgroundImageURL;
+ }
+
// Don't transition between identical backgrounds. This
// prevents unwanted flicker.
var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null;
@@ -2826,6 +2835,13 @@
function startEmbeddedContent( slide ) {
if( slide && !isSpeakerNotes() ) {
+ // Restart GIFs
+ toArray( slide.querySelectorAll( 'img[src$=".gif"]' ) ).forEach( function( el ) {
+ // Setting the same unchanged source like this was confirmed
+ // to work in Chrome, FF & Safari
+ el.setAttribute( 'src', el.getAttribute( 'src' ) );
+ } );
+
// HTML5 media elements
toArray( slide.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
if( el.hasAttribute( 'data-autoplay' ) ) {
--
GitLab