Play/Stop GIF Images Programmatically - jQuery JK GIF Player

File Size: 9.04 KB
Views Total: 648
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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/">

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.


4. Changes the GIF loop count. Default: 5.

  autoplay: true,
  autopause: true,
  loops: 2

5. Get the properties of the GIF image.

  console.log($(this).GetDuration_Gif() + " seconds");
  console.log($(this).GetDurationMili_Gif() + " miliseconds");

6. Event handlers.

$(document).on('play.JK_Gif', '.gifimage', function(e) {

$(document).on('stop.JK_Gif', '.gifimage', function(e) {

7. Override the default HTML data attribute which is used to hold the GIF. Default: 'gif'.

  data: "image",
<div class="gifimage" data-image="/path/to/gif/">



  • bugfix autoplay

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