advanced code snippet search

Posted By

Pjotor on 10/21/10


Tagged

plugin jquery vignette


Versions (?)

jQuery vignette plugin

 / Published in: JavaScript
 

Supersimple vignette plugin (req. gradients/CSS3). Use: $("body").vignette(); Options: from color, to color, fade time, vignette container class name

Bonus CSS: .vignette { height: 100%; width:100%; position:fixed; top:0; left:0; z-index:10000; background:rgba(0,0,0,.5); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 1000, from(rgba(0,0,0,.2)), to(rgba(0,0,0,.5))); background:-moz-radial-gradient(50% 50%,farthest-side,rgba(0,0,0,.2),rgba(0,0,0,.5)) }

Expand | Embed | Plain Text 
  1. (function($){
  2.   $.fn.vignette=function(options){
  3.     var opts=$.extend({},$.fn.vignette.defaults,options);
  4.     var vgn = $(this).children("div." + opts.className);					 		
  5.     if($(this).children("div." + opts.className).length)
  6.     (vgn.is(':visible'))? vgn.fadeOut(opts.fade) : vgn.fadeIn(opts.fade);
  7.     else {
  8.       var bg = ($.browser.webkit)?"-webkit-gradient(radial, 50% 50%, 0, 50% "+
  9.         "50%, 1000,from("+opts.from+"),to("+opts.to+")":($.browser.mozilla)?
  10.         "-moz-radial-gradient(50% 50%,farthest-side,"+opts.from+","+opts.to+")" 
  11.         : opts.to;
  12.       $(this).append(
  13.         $("<div/>")
  14.           .css({
  15.             "height":"100%","width":"100%","position":"fixed","top":0,
  16.             "left":0,"display":"none","background":bg,"z-index":10000
  17.           })					
  18.           .click(function(){$(this).hide()})
  19.           .fadeIn(opts.fade)
  20.           .addClass(opts.className)
  21.       );
  22.     }
  23.   };
  24.   $.fn.vignette.defaults={
  25.     from:"rgba(0,0,0,.2)",
  26.     to:"rgba(0,0,0,.5)",
  27.     fade:200,
  28.     className:"vignette"
  29.   };
  30. })(jQuery);

Report this snippet  

You need to login to post a comment.