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

  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.