A javascript player.. for GIFs!
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 4 commits ahead of buzzfeed:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example_gifs
libgif
LICENSE
README.md
demo.html
lc_gif_player.css
lc_gif_player.js
lc_gif_player.pack.js

README.md

LC GIF Player

Prior note: this is a libgif-js fork.
A very nice javascript piece to manipulate animated GIFs, by BuzzFeed

This tiny project borned since I had the necessity to create a GIF player for my product documentations.
GIFs are easy to be implemented and maintained, then sometimes are better than videos.

So.. here it is! A reponsive GIF player featuring preloader, prev/next commands and a fullscreen mode.
It is pure javascript and CSS, then is super quick to be implemented and customized.

Supports modern browsers (IE 10+)

lc-gif-player

 

How to use

Easiest way to get started is to play with the demo.html file. Here's the code used:

<!doctype html>
<html>
<head>
	<link href="lc_gif_player.css" rel="stylesheet">
</head>

<body>
	<div class="gif_player">
		<img src="" rel:animated_src="path/to_the_image.gif" />
	</div>
	

	<script type="text/javascript" src="lc_gif_player.pack.js"></script>

	<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {   
		lc_gif_player('.gif_player');     
	});
	</script>
</body>
</html>

 

Function parmeters

lc_gif_player function has got one mandatory and 3 optional parameters:

  1. DOM element selector (string) (mandatory)
        whatever you may target through querySelectorAll javasctipt function

  2. Autoplay (bool)
        true if you want to autoplay the GIF once loaded. By default is false

  3. Extra classes (string)
        you may need to add extra classes to player's wrapper. Just write them together in a single string

  4. Hidden commands (array)
        you can hide prev/next and fullscreen comands by inserting move and fullscreen keywords inside an array

 

Here's a complete example

<script type="text/javascript">
lc_gif_player('.target_2', true, 'class1 class2', ['move', 'fullscreen']);
</script>

 

One last thing: same-domain origin

The gif has to be on the same domain (and port and protocol) as the page you're loading.

The library works by parsing gif image data in js, extracting individual frames, and rendering them on a canvas element. There is no way to get the raw image data from a normal image load, so this library does an XHR request for the image and forces the MIME-type to "text/plain". Consequently, using this library is subject to all the same cross-domain restrictions as any other XHR request.


Copyright © Luca Montanari (aka LCweb)