Play/Cease GIF Photos Programmatically – jQuery JK GIF Participant

JK GIF Participant is a flexible jQuery GIF manipulation plugin that lets you manipulate GIF playback, calculate GIF properties, and deal with play/pause occasions with ease.

The best way to use it:

1. To get began, load the JK GIF Participant plugin’s information in your jQuery challenge.

<hyperlink 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. Outline the trail to the GIF picture within the data-gif attribute:

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

3. Initialize the plugin on the GIF container and accomplished. This plugin will mechanically disable the autoplay of this GIF picture till the person clicks the play icon.

$(operate(){ 
  $(".gifimage").JKGifPlayer();
});

4. Adjustments the GIF loop depend. Default: 5.

$(".gifimage").JKGifPlayer({
  autoplay: true,
  autopause: true,
  loops: 2
});

5. Get the properties of the GIF picture.

$(".gifimage").every(operate(){
  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. Occasion handlers.

$(doc).on('play.JK_Gif', '.gifimage', operate(e) {
  console.log("play");
});

$(doc).on('cease.JK_Gif', '.gifimage', operate(e) {
  console.log("cease");
});

7. Override the default HTML knowledge attribute which is used to carry the GIF. Default: ‘gif’.

$(".gifimage").JKGifPlayer({
  knowledge: "picture",
});

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

This superior jQuery plugin is developed by jeankassio. For extra Superior Usages, please examine the demo web page or go to the official web site.