https://github.com/jeankassio/jk-gif-player-jquery
JK GIF Player jQuery is a jQuery plugin that allows you to manipulate gifs, calculate their duration, their size, click to start and stop and have related events. Check it out below. **Under construction**
https://github.com/jeankassio/jk-gif-player-jquery
gif gif-animation gif-events gif-jquery gif-player gifplayer gifs javascript jquery jquery-plugin player
Last synced: about 2 months ago
JSON representation
JK GIF Player jQuery is a jQuery plugin that allows you to manipulate gifs, calculate their duration, their size, click to start and stop and have related events. Check it out below. **Under construction**
- Host: GitHub
- URL: https://github.com/jeankassio/jk-gif-player-jquery
- Owner: jeankassio
- License: mit
- Created: 2023-04-22T15:31:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-04T00:31:52.000Z (almost 2 years ago)
- Last Synced: 2025-01-18T12:29:25.895Z (3 months ago)
- Topics: gif, gif-animation, gif-events, gif-jquery, gif-player, gifplayer, gifs, javascript, jquery, jquery-plugin, player
- Homepage: https://jeankassio.dev
- Size: 9.58 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JK GIF Player jQuery
JK GIF Player jQuery is a jQuery plugin that allows you to manipulate gifs, calculate their duration, their size, click to start and stop and have related events. Check it out below. **Under construction**
I bring you a plugin developed by me that is actually a piece of code from a personal project, but I developed it as a plugin to be able to share it on Github.
I hope you enjoy.
JK GIF Player jQuery is a lightweight and very functional plugin, it loads the elements selected by you and defines play/stop controls, and it's up to you to select whether the GIF will repeat itself infinitely, and if not, how many times it will if it repeats until it pauses automatically, if it will autoplay, etc.,
You can see a demo on [CodePen](https://codepen.io/jeankassio/pen/abRpELe)
## How To Use
Gifs must be inside a "Data" type attribute in a div, as shown below. **External links, internal links, blobs and base64 are accepted.**
```html
```
Select the element you want and call the plugin, and pass the desired parameters (if you want to customize it)
```javascript
$(".div_with_data_gif").JKGifPlayer({
autoplay: false,
data: "gif",
autopause: true,
loops: 5
});
```
And the result will be:
## Parameters
Option |Values |Default
--- | --- | ---
autoplay | Whether the GIF will automatically start | false
data | Attribute name "data" found in the div, by default "data-gif" is selected |'gif'
autopause | If false, the GIF will repeat indefinitely | false
loops | Number of times the GIF will repeat itself. Can be ignored if "autopause" is false | 5
example:
```javascript
$(".gifimage").JKGifPlayer({
autoplay: true,
data: "img",
autopause: true,
loops: 3
});
```
## Getters
Option |Values
--- | ---
GetSize_Gif | Gets an object array containing the Width and Height of the image.
GetHeight_Gif | Gets Height of the image.
GetWidth_Gif | Gets the Width of the image.
GetDuration_Gif | Gets the time duration of the GIF, in seconds
GetDurationMili_Gif | Gets the time duration of the GIF, in miliseconds
Examples:
```javascript
setTimeout(function(){
$(".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");
});
}, 1000);
```
## Play/Stop programmatically
Option |Values
--- | ---
PlayStop_Gif | If it is running, stop. If it's stopped, play.
Example:
```javascript
$(".gifimage").PlayStop_Gif();
```
## Events
Option |Values
--- | ---
play.JK_Gif | It is called when a GIF element starts.
stop.JK_Gif | It is called when a GIF element is stopped.
Example:
```javascript
$(document).on('play.JK_Gif', '.gifimage', function(e) {
console.log("playing");
});
$(document).on('stop.JK_Gif', '.gifimage', function(e) {
console.log("stopped");
});
```
## Copyright and license
Code released under the [MIT license](https://github.com/jeankassio/LBT-Lightbox/blob/main/LICENSE).