Skip to content

Instantly share code, notes, and snippets.

@jlafitte
Forked from dtex/gist:4337176
Last active December 6, 2018 01:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jlafitte/2c3b8978d202a8c12079e0faf0fbca91 to your computer and use it in GitHub Desktop.
Save jlafitte/2c3b8978d202a8c12079e0faf0fbca91 to your computer and use it in GitHub Desktop.
Onion skinning plugin for jQuery
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
oSkin = $('<div class="onionSkin" style="width:100%;text-align:center;position:absolute;opacity:.5;display:none;" />');
oImg = $('<img src="'+options.src+'" />');
oImg.css(options.imgStyles);
oSkin.prepend(oImg);
$(this).prepend(oSkin);
$(window.document).keyup(function(e) {
// ctrl+o will toggle the onion skin
if (e.ctrlKey && e.which === 79) oSkin.toggle();
// ctrl+1 through ctrl+9 will set the opacity
if (e.which >= 49 && e.which <= 57) {
oSkin.css('opacity', (e.which - 48) * .1);
}
});
});
}
}, oSkin;
$.fn.onion = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.onion' );
}
};
})( jQuery );
{
"name": "onion-skin",
"version": "0.1.0"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment