jQuery Plugin To Play Animated GIF Just Like A Video - Gifplayer
File Size: | 213 KB |
---|---|
Views Total: | 5581 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A highly customizable jQuery gif player plugin which allows to play / stop animated GIF files (and even HTML5 videos) on hover or click event.
Features:
- Replaces the preview image with GIF or video file when triggered.
- Allows to delay the playing until your large GIF is completely loaded.
How to use it:
1. Load the necessary jQuery library and the jQuery Gifplayer plugin's files in your html document.
<link rel="stylesheet" href="gifplayer.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.gifplayer.js"></script>
2. Insert the preview image of your GIF into the webpage as follow. Note that the GIF file must be placed in the same folder as this: /media/1.jpg, /media/1.gif.
<img class="gifplayer" src="media/1.png">
3. Initialize the gif player with default options. That't it.
$('.gifplayer').gifplayer();
4. If you'd like to use the 'Video' mode:
<img class="gifplayer" src="media/1.png" data-mode="video" data-webm="media/1.webm" data-mp4="media/1.mp4">
5. Set the trigger event.
<img class="gifplayer" src="media/1.png" data-playon="hover" >
6. All configuration options which can be passed via HTML5 data
attributes or as a JavaScript object to the gifplayer()
method.
$('.gifplayer').gifplayer({ // lable text label: 'GIF', // or 'hiver' playOn: 'click', // or video mode: 'gif', // alternative gif gif: '', // path to video files mp4: '', webm: '', // lazy load mode wait: false, // scope mode scope: false });
7. Callback functions.
$('.gifplayer').gifplayer({ onPlay: function(){}, onStop: function(){}, onClick: function(){}, onLoad: function(){}, onLoadComplete: function(){} });
8. API methods:
// play $('.gifplayer').gifplayer('play'); // stop $('.gifplayer').gifplayer('stop');
Change log:
2017-02-20
- Fixed Preload bug in jQuery 3+.
2017-02-19
- Add onClick event
2017-07-09
- Add var declaration for scope
2017-02-01
- module support
This awesome jQuery plugin is developed by rubentd. For more Advanced Usages, please check the demo page or visit the official website.