Play/Stop GIF Images Programmatically - jQuery JK GIF Player

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>

Changelog:

2023-06-04

• bugfix autoplay

---

This awesome jQuery plugin is developed by jeankassio. For more Advanced Usages, please check the demo page or visit the official website.