Play/Stop GIF Images Programmatically - jQuery JK GIF Player
File Size: | 12.4 KB |
---|---|
Views Total: | 15 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

JK GIF Player is a versatile jQuery GIF manipulation plugin that allows you to manipulate GIF playback, calculate GIF properties, and handle play/pause events with ease.
How to use it:
1. To get started, load the JK GIF Player plugin's files in your jQuery project.
<link rel="stylesheet" href="/path/to/dist/jquery.jk-gifplayer.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/jquery.jk-gifplayer.js"></script>
2. Define the path to the GIF image in the data-gif
attribute:
<div class="gifimage" data-gif="/path/to/gif/"> </div>
3. Initialize the plugin on the GIF container and done. This plugin will automatically disable the autoplay of this GIF image until the user clicks the play icon.
$(function(){ $(".gifimage").JKGifPlayer(); });
4. Changes the GIF loop count. Default: 5.
$(".gifimage").JKGifPlayer({ autoplay: true, autopause: true, loops: 2 });
5. Get the properties of the GIF image.
$(".gifimage").each(function(){ console.log($(this).GetSize_Gif()); console.log($(this).GetHeight_Gif()); console.log($(this).GetWidth_Gif()); console.log($(this).GetDuration_Gif() + " seconds"); console.log($(this).GetDurationMili_Gif() + " miliseconds"); });
6. Event handlers.
$(document).on('play.JK_Gif', '.gifimage', function(e) { console.log("play"); }); $(document).on('stop.JK_Gif', '.gifimage', function(e) { console.log("stop"); });
7. Override the default HTML data
attribute which is used to hold the GIF. Default: 'gif'.
$(".gifimage").JKGifPlayer({ data: "image", });
<div class="gifimage" data-image="/path/to/gif/"> </div>
This awesome jQuery plugin is developed by jeankassio. For more Advanced Usages, please check the demo page or visit the official website.