rubentd / gifplayer Goto Github PK

View Code? Open in Web Editor NEW

463.0 463.0 79.0 2.17 MB

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

CSS 12.23% JavaScript 87.77%

gifplayer's People

Contributors

Stargazers

Watchers

Forkers

touchart landsurveyorsunited leotaillard 2bj arjunmenon yajinn slakshmikanth letunglam copterfly ghpeter1990 danieldacruzferreira stf-gr vslice11 supertoroop zenseo zonayedpca-zz somethingforever kamalendugarai fmedinac jadark skardii imcarlosdev mgnexus macagoraga rodolfosilva itechbeast kevingiacomino bhdrgkz andresrivera838 kedareddy kevin1220 ajlatham gaswagen mis4s yl23250 abhishekgahlot balajibecs20 resfront hfazal eko24 my-instantcms juniorsilva42 sakamotoyouta mcueto luffy90223 kazimolmez aakims quanghuyhh heeseungp luhengqi mattrabe corchoneitor zfw279046483 seco wallace11 nenno54 unique1984 alperent luiscarlospando sabiduria ryotars merritt212 ngocminhxx trianglesis rvhome danchao-gu orbanisti hanbaga willcai2020 jandanj masterofthesith zachm88 lucis2015 iq-scm

gifplayer's Issues

on phones the gif and videos are not played

it is working fine on desktop and tablets and on Puffin browser but the other phone browsers only keep spinning

Way to add an "autoplay" option which would allow it to be used for an unobtrusive preloader for a long loading gif?

pause on mouseout

would be great if the gif stops animating when not focused / in viewport / mouseout.

stopGif() before .animationLoaded results in UI bug

Repro steps:

Hard to test without a really large animated GIF or some other way to slow load time down substantially. I used this large img from wikipedia
Create 2 images in DOM within the same scope and with that large GIF: <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="">
Init using $('img').gifplayer({... wait: true ...})
Open in browser, click on first GIF (which starts loading) and then quickly click the second GIF. You must click the second GIF before the first one loads completely into the DOM
Wait until the large GIF is fully downloaded. You will see that the first image now disappears. This is because the onload handler within the 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

Doesn't seem to work on Safari

I was doing cross-browsing testing of http://rubentd.com/gifplayer and it doesn't seem to work on Safari (MacOS Yosemite).

Not yet working in php hosted environment

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">

$('.gif').gifplayer();></script> HTML; ?>

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

gif image resize

Hi.
I want to resize the image on mobile...

Preload bug jquery 3.0

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); });

// 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

video mode not working in android

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.

Responsive

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!!!

Spinner hide function not working

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.

Call function from AJAX loaded content

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!

Ignores data-gif attribute

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.

preview image generation

Can it be configured to generate a preview image automatically rather than providing it one?

location of <script> $('.gifplayer').gifplayer(); </script>

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

Auto-play removed?

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?

Wrong RGBA Values

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.

Data label not vertically centered

Everything else works great but the label on the button isn't centered for some reason. Any suggested fixes?

Video Mode Errors

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!

Publish on NPM?

Hi @rubentd ,

Thanks for a such a great plugin. Can you publish it on npm as well ?

Thanks!

Cant use this inside a hidden element

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.

ReferenceError: assignment to undeclared variable scope

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');

onEnd event

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.

bower.json is outdated

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

FireFox GifPlayer not works fine.

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.

Gif player play button problem

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.

Removing the gif data label

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?

Scope and Video mode not working together

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();
	}
});