https://github.com/krasimir/gifffer

A tiny JavaScript library that prevents the autoplaying of the animated Gifs
https://github.com/krasimir/gifffer

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/krasimir/gifffer
• Owner: krasimir
• License: mit
• Created: 2014-06-18T15:11:33.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-08-30T15:36:31.000Z (about 5 years ago)
• Last Synced: 2024-11-02T00:06:34.649Z (7 days ago)
• Language: JavaScript
• Size: 4.41 MB
• Stars: 775
• Watchers: 24
• Forks: 92
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-gif - Gifffer - JavaScript library that prevents the autoplaying of the animated GIFs. (Libraries / JavaScript)

README

        
# Gifffer

---

> JavaScript library that prevents the autoplaying of the animated Gifs.

## Demo

[http://krasimir.github.io/gifffer](http://krasimir.github.io/gifffer)

## Usage

Include `gifffer.min.js` in your page.

```html

```

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

```html



```

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

```js

window.onload = function() {

  Gifffer();

}

```

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

```html



```

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

```js

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.

```html



```

*(`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).

```



```

### 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 `` tag with newly generated `
` 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 `` tag is replaced by a `
`. Consider the fact that it is a block element.


## Inspiration

[http://stackoverflow.com/a/4276742/642670](http://stackoverflow.com/a/4276742/642670)