krasimir/gifffer

A tiny JavaScript library that prevents the autoplaying of the animated Gifs

Gifffer

---

JavaScript library that prevents the autoplaying of the animated Gifs.

Demo

http://krasimir.github.io/gifffer

Usage

Include gifffer.min.js in your page.

<script type="text/javascript" src="gifffer.min.js"></script>

Instead of setting src attribute on your image use data-gifffer.

<img data-gifffer="image.gif" />

At the end, call Gifffer(); so you replace the normal gifs with playable gifs. For example:

window.onload = function() {
  Gifffer();
}

For accessibility reasons, instead of setting alt attribute on your image, you may use data-gifffer-alt (optional).

<img data-gifffer="image.gif" data-gifffer-alt="some alt description"/>

The Gifffer function returns an array of nodes that could be used to simulate clicks. For Example:

window.onload = function() {
  var gifs = Gifffer();

  setTimeout( function() {
    gifs[0].click(); //will play the first gif
  }, 1000);
}

Gifffer will show the controls immediately if you set data-gifffer-width and data-gifffer-height even if the image is not fully loaded.

<img data-gifffer="image.gif" data-gifffer-width="250" data-gifffer-height="237" />

(data-gifffer-width accepts percentages value)

Have in mind that the library keeps the value of the class and id attributes. They are applied to the newly created element.

If you want to stop the Gif and reset it to its original position afetr a given time interval use data-gifffer-duration (in milliseconds).

<img data-gifffer="image.gif" data-gifffer-duration="4000" data-gifffer-width="250" data-gifffer-height="237" />

Module Loading (Webpack or Angular ect)

Install npm module

npm i --save gifffer

Import

import Gifffer from 'gifffer';

let gifs = Gifffer();

Typescript

npm i --save-dev @types/gifffer

Styling

The Gifffer() function accepts a few options for styling:

Gifffer({
  playButtonStyles: {
    'width': '60px',
    'height': '60px',
    'border-radius': '30px',
    'background': 'rgba(0, 0, 0, 0.3)',
    'position': 'absolute',
    'top': '50%',
    'left': '50%',
    'margin': '-30px 0 0 -30px'
  },
  playButtonIconStyles: {
    'width': '0',
    'height': '0',
    'border-top': '14px solid transparent',
    'border-bottom': '14px solid transparent',
    'border-left': '14px solid rgba(0, 0, 0, 0.5)',
    'position': 'absolute',
    'left': '26px',
    'top': '16px'
  }
});

That's about the play button. Note that if you decide to use playButtonStyles or playButtonIconStyles you have to provide the full style of the elements. For example providing only { top: '20px' } property results in top:20px;.

How it works

It replaces your <img> tag with newly generated <div> that contains only the first frame (roughly) of your animated Gif. It creates a play button on top of it and when the element is clicked it returns the original image.

Compatibility

Chrome, FF, Safari, Opera, IE9+

Side effects

Your <img> tag is replaced by a <div>. Consider the fact that it is a block element.

Inspiration

http://stackoverflow.com/a/4276742/642670

gifffer's Issues

Width and height percentage support needed.

You can't specify height and width in percents which would be a big advantage!

Transition not smooth

When switching between still and playing gif depending on the CPU load the transition is not smooth. So, for a split millisecond a white canvas is shown when transitioning from still gif to playing gif.

What about "pause" button instead of "restart"?

The title say everything! 💃

Thanks for the beauty lib!

Minor things: automatic width, running Gifffer() many times

Hi Krasimir,

Gifffer works great for me :-) I've made some tweaks in my copy of Gifffer, perhaps you'd like to have a look in case there's something you'd like to incorporate in your master version.

https://github.com/debiki/debiki-server/blob/master/client/third-party/gifffer/gifffer.js

Here's the diff of my changes: debiki/talkyard@7ae2601 (search for gifffer.js on that diff page)

There are two changes that might be of interest:

• Make Gifffer() safe to run many times (in my case, more gifs are sometimes added long after page load)
• Scale gifs so they fit in the parent elem: max-width: 100%. And reposition the play button via CSS calc(50% + ...) so it's always in the middle, regardless of the current gif size

( + tweak colors. I thought the play button was a bit too transparent.)

(There are some other changes as well but I think they are specific for my web app.)

Preview Picture

Hi. I recently discovered your Library. Is it possible to set the standard Preview Picture? I would like to change it to the last Picture of the .gif .

Can you apply the play/stop button on a frame other than the 1st?

Hi,
I am trying to have the animated gif stopped not on the first frame, but on the 3rd, is that possible?

Not responsive

I made the max-width 100% but when I switch screen from normal to landscape, canvas doesn't resize. It loads just fine, regardless of screensize, but on screen resize it's not responsive.

the problem of calculatePercentageDim

`function calculatePercentageDim (el, w, h, wOrig, hOrig) {
var parentDimW = el.parentNode.offsetWidth;
var parentDimH = el.parentNode.offsetHeight;
var ratio = wOrig / hOrig;

if (w.toString().indexOf('%') > 0) {
w = parseInt(w.toString().replace('%', ''));
w = (w / 100) * parentDimW;
h = w / ratio;
} else if (h.toString().indexOf('%') > 0) {
h = parseInt(h.toString().replace('%', ''));
h = (h / 100) * parentDimW;
w = h / ratio;
}

return { w: w, h: h };
};`

in the block 'else if', w & h is calculated in a flawed way!
Maybe as below:

else if (h.toString().indexOf('%') > 0) { h = parseInt(h.toString().replace('%', '')); h = (h / 100) * parentDimH; w = h * ratio; }

gif loaded after refresh page only

if i send gif image in nodejs chat - picture not visible, but on refreshed page it is ok. why?

Node module won't resolve

After updating from 1.5.1 to 1.5.3 via npm update I can no longer import Gifffer from my node_modules folder using the normal syntax, e.g.:

import Gifffer from "gifffer"

Webpack will report:

Module not found: Error: Can't resolve 'gifffer' in [file]

I am working around this temporarily by downgrading to 1.5.1.

Object_fit does not work

Hi Kashmir.

First of all, let me say that this plugin is really nice and easy to use. Thumbs up for that!
However, There is a small problem I am encountering. I have gif's on my website and I do want this plugin to stop them to save memory.
By default, I have styled them to use a fixed dimension (width = 450px, height 300px and object_fit: contain) to maintain their aspect ratio. When gifffer is activated and the canvas is used, the image is stretched. Looks like object_fit has not applied to it. Is there a way to fix this?

Best regards Erol

no control button on the UC browser mobile

1, no control button on the UC browser mobile;
2, it is recommended that the loading of SRC, and load the true GIF address, can accelerate web page open speed, saves the traffic

Customization request

Works well, but I have some darker images and the play button is barely visible. Would it be possbile to adjust the constructor to take some (optional) parameters? For me it would fit a lot better if I can set size & colors.

note: the click to play button on flash elements in chrome are 50px by default 😉

Centering animated gif

Great plugin but when I try to center the gif in a div is defaults to align: left.

How can I center the gif?

Thank!

Small site redraw without picture or placeholder

When you click the placeholder button with the canvas, for a splitsecond you see the page is rendered without placeholder nor the gif.
To prevent this you could use replaceChild instead of removeChild and appendChild for canvas and gif? That would be a quickfix. Otherway would be to build the whole container with canvas / gif and replace the whole button, which causes just one redraw.

Showing last played frame when pause button pressed

Hi krasimir,

firstly thanks! for the awesome library, works like a charm and really easy to get up and going.
Would it be possible to modify the javascript so that the last played frame is displayed in the pause state, rather than the initial one?

Thanks
Dave

Doesn't play from where it was paused in Safari

I am playing your demo on Safari v9.0.2 on Mac OSX El Capitan and the GIF starts from the beginning when I play it back again after pausing.

Is there a way to fix this?

possible to stop other?

Hello,
Good job
How to stop other when click ..like if not this stopOther()
Best regards
siup

Not pausing on Microsoft Edge

Hi-
Thanks so much for building and sharing Gifffer.
I'm enjoying it quite a bit, but for whatever reason it's not working in Microsoft Edge. The still image of a GIF appears in place along with the play button but the GIF seems to be playing/looping beneath the image - it plays regardless of whether someone has clicked the play or pause button.
On the same page, Gifffer is working flawlessly in Chrome and Firefox.
Any idea how why this is happening or how it can be fixed?
Again, thanks!

Complete programmatic access

Hi! Nice little library you've got here.

Would love to use this, although instead of using it as a user-interactive gif player, I would love to use it for programmatically controlling GIFs. Is it possible to:

1: Completely disable toggling of the GIF play state via clicks; and
2: Programmatically .play(), .pause(), .rewind(), and .stop() GIF playback?

This allows for autonomous control of the GIFs, allowing me to use any events as trigger to the playback. For example, this allows me to make a GIF animated logo appear static on the header of my app, playing and pausing the animation playback based on global loading state. Or perhaps, I would be able to make it such that GIFs play on-hover instead of on-click.

weird behaviour in internet explorer 11

Hello,

I really like gifffer, but the behaviour of gifs in internet explorer is a bit weird.

What I want:
A gif, that gets played onclick and stops after a while (or on click again). If you decide to play the gif again, it starts with the first frame. This works, as shown in your examples, in firefox, opera and chrome. However In internet explorer the gif starts with the last shown frame. This is not a huge issue, but its annoying. Is there any way around this behaviour?

thanks in advance

gif quality

hi, today i find this library. and write a demo, but I find gif image quality reduce.

My Code:

<img data-gifffer="./demo.gif">
<script type="text/javascript" src="gifffer.min.js"></script>
<script>
    Gifffer();
</script>

My gif real size is: 5.5MB

How to increase canvas gif quality?

create bower package

Not accessible

• Step 1: change container div to button to allow keyboard access.
• Step 2: add possibility to add visibly hidden alt-text for screen reader users.

Is this a welcomed contribution?

title (tooltip) is ignored by gifffer

The title (tooltip) is lost when gifffer is applied to image.
Please apply the image's title tag to the output html.

Repro:
<img data-gifffer="apples.gif" data-gifffer-alt="Apples" title="Click to show apples"/>

Results:

<button style="position:relative;cursor:pointer;width:200px;height:112px;background:none;border:none;padding:0;" aria-hidden="true">
    <div class="gifffer-play-button" style="width:60px;height:60px;border-radius:30px;background:rgba(0, 0, 0, 0.3);position:absolute;top:50%;left:50%;margin:-30px">
        <div style="width: 0;height: 0;border-top: 14px solid transparent;border-bottom: 14px solid transparent;border-left: 14px solid rgba(0, 0, 0, 0.5);position: absolute;left: 26px;top: 16px"/>
    </div>
    <canvas width="200" height="112" style="width: 100%; height: 100%;"/>
</button>

Auto plays GIF on page load in Chrome on the demo

The demo URL http://work.krasimirtsonev.com/git/gifffer/example/ plays all the GIF images on page load and then shows the play button. SO on initial page load it is auto loading and playing the GIFs, this is a bug?

I just saw the Stackoverflow post you linked as inspiration. In a newer answer on that post here http://stackoverflow.com/a/24707088/143030 it has a cross-browser solution. Would someone be able to integrate this new code into this library? Would be grateful!

Option to set preview frame image and avoid loading image until clicked on?

I would like to use something like this on a page with many GIFs so I need a way to have my GIFs downloaded only once clicked on instead of all loaded on page load. If I have 100mb of GIFs on the page, the point of having a play button for me is to allow for the page to still be fast but currently it downloads all images on page load to get the first frame image for preview.
Any chance of modifying to make it optional to provide a URL of preview image and have it only download image on demand when play is clicked?

npm module

Hey, any chance you could package this for npm? I'd really appreciate it!

when to show data-gifffer-alt

both in the examples and the source code, I don't know when the data-gifffer-alt can show??

Gifffer distorts long images

I'm finding that the gifffer is distorting images that are significantly longer than they are wide.

Any idea why or how to fix?

callback

add callback for calling zoom clicked gifs