Possible to stop animated gifs when navigate away from section?

[eabigelow]

Hi--

I love working with reveal.js--very easy and flexible to use. Thanks so much for that!

I was wondering if it is possible to have animated gifs only play when the user navigates to the particular section that the animated gif is on? Currently, you can do this with videos (works great), but it would also be very useful if animated gifs only ran when the user was on that section were the gif is. It would make the slider work more smoothly because the gifs would not all be playing in the background.

Any thoughts about this? Or fixes? Again, thanks for the great work!

[rparree]

You could replace the src of the animated gif with a static image, and then when the section becomes active replace it with the actual gif URL:

$(function () {
    // on page load  replace all src URLs

    $('.animated-gif').each(function (i, e) {
        disableGif(e)
    });
});
Reveal.addEventListener('slidechanged', initAnimatedGifs);
Reveal.addEventListener('ready', initAnimatedGifs);

function initAnimatedGifs(event) {
    $('.animated-gif', event.currentSlide).each(function (i, e) {
        enableGif(e)
    });

    if (event.previousSlide)
        $('.animated-gif', event.previousSlide).each(function (i, e) {
            disableGif(e)

        });
}

function enableGif(e) {
    var src = $(e).attr("src")
    $(e).attr('src', src.replace('-image.gif', '.gif'));


}
function disableGif(e) {
    var src = $(e).attr("src")
    $(e).attr('src', src.replace('.gif', '-image.gif'));

}

[eabigelow]

Hi, rparree--

Thank you very much for this.

Could you tell me exactly how to implement this, please? I am not sure how the modified html should look, and as a terribly poor newbie to js, I am also not exactly sure how to modify your .js script for my slider.

Here is an example of the current code for one section:

[CODE]

   <div class="animations"><img alt="image here" width="100%" height="100%" src="animations/1.gif"> </div>   

[/CODE]

animations/1.gif is the animation which I would like to play from the beginning (it only plays once). Also, I have called the .js script with this in the header: <script type="text/javascript" src="js/gifs.js"></script> (I named your js script as "gifs").

Again, many thanks for any help!

[eabigelow]

Oops! Sorry, I forgot to mention that I will also be doing this about seven times in different places throughout the slider.

Again, thanks!

[rparree]

Just place the snippet in the last script element in your html page after the Reveal.initialize
and add the following class to your img: animated-gif

[eabigelow]

Wow. Works like a charm! Thanks so much, rparree! If it's ok, can I pay pal you $20 for your trouble?

[rparree]

no worries...just helping out :) glad i could help

[eabigelow]

Thanks very much again! Quick question, though. When I apply the class to the animation, it kicks it halfway down the page. It still works, but it won't place in the center of the page. Is there a way to correct that?

[eabigelow]

I see when I go into reveal.min.css and change .reveal .slides{..... top:50% to top: 0% that solves the problem, but it also kicks everything else to the top of the page....

[eabigelow]

No problems in Chrome, by the way. Firefox is where the trouble lies...

[rparree]

I am not sure if it is related. However do note that you are setting the CSS class, so you might want to ensure you apply the same style as img:

.animated-gif{
    max-width: 95%;
    max-height: 95%;
}

Try setting the width and height attributes on your img as well (to the actual size of your gif)

Note: don't edit the reveal.min.css, this file is generated using grunt (cssmin) from reveal.css. Even better use your own css file, so you can easily pull updates from git without having to merge the css files.

[eabigelow]

Hi, rparree--

Thanks for the advice. I think I found a solution by adding the style to the end of the javascript, like this:

function disableGif(e) {
'.animated-gif'.style.top="0%";

var src = $(e).attr("src")
$(e).attr('src', src.replace('.gif', '-image.gif'));

}
</script>

This seems to have worked (I hope). Again, thanks for all your help! Much appreciated!

PS Are you ever available for small coding jobs here and there?

[hakimel]

Glad you guys were able to work this out, thanks @rparree

[rparree]

@eabigelow ref "available for small coding jobs". Yes i am available for small coding jobs (as long as they are small enough not to interfere with my already busy schedule :). Please contact me by email (see my profile page)

[ynuska]

How can I pause and resume the animated gif ?