Skip to content

Instantly share code, notes, and snippets.

@milsyobtaf
Created January 31, 2014 17:25
Show Gist options
  • Save milsyobtaf/8737396 to your computer and use it in GitHub Desktop.
Save milsyobtaf/8737396 to your computer and use it in GitHub Desktop.
Play Gif, by @jesse of SB Nation
/*!
* Play GIF
*
* by Jesse Young
*
* a jQuery plugin to play GIF animations on mouseover (or any other event).
*
* Examples:
* $('img[src$=".gif"]').playGIF(); // default is mouseover
* $('img[src$=".gif"]').playGIF({on:'click'}); // play animation on click
*/
;var PLAYGIF_DISABLE_FLAG;
(function($) {
$.fn.playGIF = function(options) {
var settings = $.extend({
'on': 'mouseenter', // event to play animation
'off': 'mouseleave', // event to stop animation
'autoResize': false, // canvas dimensions adapt to container
'enable': true,
'circleColor': 'ff0000',
'removeAnchor': true // sometimes writers link the GIF to itself, causing it to open in a new window.
}, options);
// Look for flag in global scope
if (typeof PLAYGIF_DISABLE_FLAG !== 'undefined') {
settings.enable = !PLAYGIF_DISABLE_FLAG;
}
// Draw "GIF" circle on top of image
var drawGIFOverlay = function(context, x, y) {
x = Math.floor(x);
y = Math.floor(y);
// circle
var radius = 35;
context.fillStyle = '#' + settings.circleColor;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
// text
context.fillStyle = '#ffffff';
context.font = "15px 'Gotham SSm A', 'Gotham SSm B', sans-serif";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText("GIF", x, y);
};
return this.each(function() {
if (settings.enable === false) { return }
var $gif = $(this);
// Skip if it's not a GIF
if (!$gif.is('img') || !/\.gif$/i.test($gif.attr('src')) ) { return true; }
var canvas = document.createElement('canvas');
if (typeof canvas.getContext === "undefined") { return true; } // THIS CHECK TO PREVENT IE 8 FROM EXPLODING
var context = canvas.getContext('2d');
var img = new Image();
var start_animation = function(a, b) {
b.on(settings.off, function() { stop_animation(a, b); });
// Hackery to make GIFs play from the beginning everytime.
// Momentarily replace the src with a blank 1x1 GIF, then set it back
// to the original src.
var src = b.attr('src');
b.attr('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
b.css({width:a.attr('width'), height:a.attr('height')});
setTimeout(function() { b.attr('src', src); }, 0);
a.replaceWith(b);
};
var stop_animation = function(a, b) {
a.on(settings.on, function() { start_animation(a, b); });
b.replaceWith(a);
};
img.onload = function() {
var width = $gif.width();
var height = $gif.height();
canvas.width = width;
canvas.height = height;
context.drawImage(img, 0, 0, width, height);
// Replace GIF w/ static canvas image
var $canvas = $(canvas);
// Wrap $canvas in a parent container so it can inherit the dynamic width dimension
if (settings.autoResize === true) {
canvas.setAttribute('data-src', $gif.attr('src'));
canvas.setAttribute('class', 'gif');
var $faux = $('<span class="faux-image">');
$faux.css({
'float':$gif.css('float'),
'margin':$gif.css('margin'),
'padding':$gif.css('padding'),
'max-width':'100%',
'position':'relative',
'display':'block',
'height':canvas.height
});
$canvas.css({'position':'absolute', 'top':0, 'left':0});
// Wrap canvas in container
$canvas = $faux.append($canvas);
} else {
// Inherit properties of GIF
$canvas.css({
'float':$gif.css('float'),
'margin':$gif.css('margin'),
'padding':$gif.css('padding'),
'display':$gif.css('display')
});
}
// Replace GIF w/ static canvas
$gif.replaceWith($canvas);
// Sometimes the containing element fixed dimensions and cut off
// portions of the GIF. In this case, use the parent's dimensions
// to center the circle overlay.
var $parent = $canvas.parent();
if (!$parent.is("p") &&
($parent.css('max-width') !== 'none' || $parent.css('max-height') !== 'none')) {
width = $parent.width();
height = $parent.height();
}
if (settings.removeAnchor) {
if ($parent.is('a') && /\.gif$/i.test($parent.attr('href')) ) {
$parent.replaceWith($canvas);
}
}
// Show GIF overlay if dimensions are greater than 150x150
if (width > 150 && height > 150) {
drawGIFOverlay(context, width/2, height/2);
}
// Attach event to canvas
$canvas.on(settings.on, function() { start_animation($canvas, $gif); });
}
img.src = $gif.attr('src');
});
}
})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment