rubentd / gifplayer Goto Github PK
View Code? Open in Web Editor NEWCustomizable jquery plugin to play and stop animated gifs. Similar to 9gag's. Support for video formats
Home Page: http://rubentd.com/gifplayer
License: MIT License
Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's. Support for video formats
Home Page: http://rubentd.com/gifplayer
License: MIT License
Hi
My wordpress host doesn't allow bower or repo. I cut & paste jquery.gifplayer.js into the theme's js folder, and added the gifplayer css to the theme's style.css. The <script>s are called in the header. Below the gif, using Heterodoc (with <<<HTML because of PHP) I put <script>$('.gif').gifplayer();</script> as follows:
<div
align="center">
<img class="gif" style="border-radius: 25px; border: 30px solid #b87333;" scro�lling="no" id="oPolyfoilComplete" width="700" height="425" src="http://polyfoils.com/wp-content/uploads/2016/12/oPolyfoilComplete.gif" frameborder="0">
?>
I also tried <script>
$(document).ready( function(){
$('.gifplayer').gifplayer();
});
</script>
Originally the animated gif was in an iframe, but i made it img. No difference. It's img class="gifplayer", also tried "gif".
i'm sure I've missed something - I apologize in advance.
Brian
Hi, there's an issue on the RGBA values on:
https://github.com/rubentd/gifplayer/blob/master/css/gifplayer.css#L41-L44
Found this issue while importing your .css file into my Scss file. Here's some support on the issue: http://stackoverflow.com/questions/30325994/scss-error-on-rbga-256-color
By the way thanks for this awesome script.
Is there anyway to remove the data label entirely. I've passed in {label: " "} but I still get the Two circles. Is there anyway to remove those circles?
I was doing cross-browsing testing of http://rubentd.com/gifplayer and it doesn't seem to work on Safari (MacOS Yosemite).
Hello.
All works fine in all navegators, but in FireFox not works fine. Because script get in div gifplayer-wrapper style="width: 24px; height: 24px;".
Test its here (TEST IN FIREFOX) in chrome and explorer its good: http://gifeando.com/gifs/ni-ellas-quieren-boda-omkD5sqZeQ1T1jRombsv
Why?
Thanks in advanced.
Hi,
Found this little bug using jquery 3.0. According to the answer on Stackoverflow the preload "load" function needs to be different:
http://stackoverflow.com/questions/37738732/jquery-3-0-url-indexof-error
So when changing:
// Wait until gif loads this.gifElement.load( function(){ gp.animationLoaded = true; gp.resetEvents(); gp.previewElement.hide(); gp.wrapper.append(gp.gifElement); gp.spinnerElement.hide(); gp.getOption('onLoadComplete').call(gp.previewElement); });
to
// Wait until gif loads this.gifElement.on({ load: function(){ gp.animationLoaded = true; gp.resetEvents(); gp.previewElement.hide(); gp.wrapper.append(gp.gifElement); gp.spinnerElement.hide(); gp.getOption('onLoadComplete').call(gp.previewElement); } });
Things work again.
Thanks for this plugin!
Greetz,
walter
Hi, is there anyway that the element width its set to 100% and the height to auto, instead of exact pixels? it works on tablets and mobile if i insert the img inside a responsive div, but if i resize the browser the img wont resize!
Besides that this worked 10 points!!!
What do you think?
I'm getting a "Uncaught TypeError: this.spinnerElement.hide is not a function" issue that I wasn't getting in a previous version. It may be my implementation; just wanted to see if anyone had a fix or similar issues.
The version of the library on the demo site (http://rubentd.com/gifplayer/) is different than master. It has auto-play capability, but that seems to be removed now? Was this for a reason?
On an Android version 4.1.2. , Firefox 37.0.2, Opera 29.0 it doesn't work right.
On Android and Firefox it makes duplicate videos underneath the original one.
On Opera when pause it doesn't show the play button and when played it shows the play button.
On Chrome its works OK!
Hi
I am trying to use this inside a hidden element such as an expandable or a collapsible div. The initial height calculated is 0, and so when the image shows up, it has width and height set to 0.
Can it be configured to generate a preview image automatically rather than providing it one?
Its possible to add a onEnd event like https://github.com/buzzfeed/libgif-js#constructor-options?
onEnd - Add a callback for when the gif reaches the end of a single loop (one iteration). The first argument passed will be the gif HTMLElement.
Hello!
The browser throws an error
ReferenceError: assignment to undeclared variable scope
Corrected as follows:
It was:
processScope: function() {
scope = this.getOption('scope');
Became
processScope: function() {
var scope = this.getOption('scope');
Thanks you first for gifplayer. I just downloaded and trying the latest.
I have been trying it and I have small issue. The player seems to require putting
<script>
$('.gifplayer').gifplayer();
</script>
In the body of the HTML and not in the HEAD, and it has to be at the very end of the HTML page below all earlier entries of
<img class="gifplayer" src="media/banana.png" />
If I add it below each img
entry, then it does not work well. it seems there has to be once instance of it,
This causes a problem, since the software I am using to generate the HTML splits the large document into multiple separate HTML pages and therefore the code $('.gifplayer').gifplayer();
will not be located on the same page where the gif call is and where it is needed.
I tried adding
<script>
$('.gifplayer').gifplayer();
</script>
to the HEAD of the HTML page, but that did not work. It had no effect. It seems that is has to be below the code that uses it for some reason in the BODY.
Is it possible to make the player work by putting the script code $('.gifplayer').gifplayer();
in the HEAD of the HTML page instead of the BODY?
This will then work for me, because when splitting the large document, the HEAD of the page is the same for each separate page, and so I will not lose the $('.gifplayer').gifplayer();
as it happens now.
Thank you
--Nasser
URL in data-gif
attribute seems to be ignored and the plugin simply attempts to load a file with .gif extension, replacing the .png extension in src
attribute.
Looks like getGifSrc function is to blame.
Hello... Are you still develop this great plugin?
I Have a problem when using this plugin to load gifs in content loaded by AJAX. Using "$('body').gifplayer();" in js files inside document ready. Nothing error, but it will not works. Adding this function into success event when AJAX loaded, but it look duplicated.
Can you give us any additional option such selector name just like bootstrap? There is bootstrap function to execute in AJAX:
$('body').tooltip({selector:'[data-toggle="tooltip"]'});
I wish gifplayer plugin have an option:
$('body').gifplayer({selector:'[gif-class="gifs"]'}); instead $('.gifs').gifplayer();
So we can bind function into AJAX without duplicate. Hope you can update this plugin.
Thank you!
i have tried to run online/local VIDEO MODE, but
both have failed to run.
additionally can u modify to run it on load cause i do not want to add additional png/thumbnail feature.
Hi.
I want to resize the image on mobile...
Repro steps:
<img data-scope="testscope" data-gif="https://upload.wikimedia.org/wikipedia/commons/a/a1/Lexington_original_configuration_orig.gif" src="SomeOtherStaticGIF.gif" alt=""> <img data-scope="testscope" data-gif="https://upload.wikimedia.org/wikipedia/commons/a/a1/Lexington_original_configuration_orig.gif" src="SomeOtherStaticGIF.gif" alt="">
$('img').gifplayer({... wait: true ...})
loadGif
function calls gp.previewElement.hide()
once loading completes, but the stopGif
function has already called this.gifElement.hide()
- therefore both elements are hidden.I'm working on a commit/PR for this right now, and will post it soon
Please update/publish your bower.json file, because I spent a hell of a lot time to notice this
"description": "Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's. Supports video",
"version": "0.3.2",
"main" : [
"js/jquery.gifplayer.js",
"css/gifplayer.css"
],
Thank you
would be great if the gif stops animating when not focused / in viewport / mouseout.
Tried to use both features in the same instance and didn't work.
I did some digging and solved it. It also works if there are gifs and video in the same scope.
I'm not doing a pull request because I didn't tested so well, but here is the code if you want to do it. I apologyze if this is not the right way.
processScope: function(){
var scope = this.getOption('scope');
if( scope ){
if(GifPlayer.scopes[scope]){
if ( GifPlayer.scopes[scope].mode == 'gif' ) {
GifPlayer.scopes[scope].stopGif();
} else if ( GifPlayer.scopes[scope].mode == 'video' ) {
GifPlayer.scopes[scope].pauseVideo();
}
}
GifPlayer.scopes[scope] = this;
}
}
this.videoElement.on('click', function(){
if(gp.videoPaused){
gp.processScope();
gp.resumeVideo();
}else{
gp.pauseVideo();
}
});
Hi,
I'm having problem with gif player play button. When i press play (to start gif) page jumps to top. It is very frustrating and I've had hard time to try to fix it.
EDIT I've uploaded page and resources on server, and now when I click play button browser navigates to base href: www.asd.com(root)/#
Is there a way to remove hyperlink from play button ?
plugins:
1.11.1 jquery
and bootstrap 3.3.0
Thanks for help.
it is working fine on desktop and tablets and on Puffin browser but the other phone browsers only keep spinning
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.