gifplayer   

gifplayer is a jquery plugin that will help you play and stop animated gifs on your website. Something like they do in 9gag or facebook.

The advantage of using this plugin is that you can load a lighter static version of the animated gif, and then load the actual animated gif, when the user wants to see it in motion. Improving the initial load time of your page.

gifplayer has support for video formats such as webm and mp4. Also, you can customize the event that will trigger the animated gif, for example: click, mouseover. Or you can start and stop the animations by calling specific methods.

 

Take a look at the demos:

Default options (play on click)

<img class="gif" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Play on mouseover

<img class="gif" data-playon="hover" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Wait until animated gif/video is fully loaded

<img class="gif" data-wait="true" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Setup alternative source

<img class="gif" data-gif="./media/banana.gif" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Video mode

<img class="gif" data-mode="video" data-webm="./media/banana.webm" data-mp4="./media/banana.mp4" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Custom size

<img class="gif" width="500" height="500" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

Scopes

When one of the elements starts the animation, the others elements within the same scope stop.

<img class="gif" data-gif="./media/banana.gif" src="http://rubentd.com/img/banana.png">
$('.gif').gifplayer();

 

 

Installation

Clone the repo into your project

git clone https://github.com/rubentd/gifplayer.git

Or install using bower

bower install --save jquery.gifplayer

Then include the references to the css and js files in your html:

<link rel="stylesheet" type="text/css" href="bower_components/jquery.gifplayer/dist/gifplayer.css">
<script type="text/javascript" src="bower_components/jquery.gifplayer/dist/jquery.gifplayer.js"></script>

 

If you liked this plugin, don't forget to give me a star in Github. And check out my blog for more javascript related content.

 

Udemy