jquery.ifixpng.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /*
  2. * jQuery ifixpng plugin
  3. * (previously known as pngfix)
  4. * Version 2.1 (23/04/2008)
  5. * @requires jQuery v1.1.3 or above
  6. *
  7. * Examples at: http://jquery.khurshid.com
  8. * Copyright (c) 2007 Kush M.
  9. * Dual licensed under the MIT and GPL licenses:
  10. * http://www.opensource.org/licenses/mit-license.php
  11. * http://www.gnu.org/licenses/gpl.html
  12. */
  13. /**
  14. *
  15. * @example
  16. *
  17. * optional if location of pixel.gif if different to default which is images/pixel.gif
  18. * $.ifixpng('media/pixel.gif');
  19. *
  20. * $('img[src$=.png], #panel').ifixpng();
  21. *
  22. * @apply hack to all png images and #panel which icluded png img in its css
  23. *
  24. * @name ifixpng
  25. * @type jQuery
  26. * @cat Plugins/Image
  27. * @return jQuery
  28. * @author jQuery Community
  29. */
  30. (function($) {
  31. /**
  32. * helper variables and function
  33. */
  34. $.ifixpng = function(customPixel) {
  35. $.ifixpng.pixel = customPixel;
  36. };
  37. $.ifixpng.getPixel = function() {
  38. return $.ifixpng.pixel || 'images/pixel.gif';
  39. };
  40. var hack = {
  41. ltie7 : $.browser.msie && $.browser.version < 7,
  42. filter : function(src) {
  43. return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')";
  44. }
  45. };
  46. /**
  47. * Applies ie png hack to selected dom elements
  48. *
  49. * $('img[src$=.png]').ifixpng();
  50. * @desc apply hack to all images with png extensions
  51. *
  52. * $('#panel, img[src$=.png]').ifixpng();
  53. * @desc apply hack to element #panel and all images with png extensions
  54. *
  55. * @name ifixpng
  56. */
  57. $.fn.ifixpng = hack.ltie7 ? function() {
  58. return this.each(function() {
  59. var $$ = $(this);
  60. // in case rewriting urls
  61. var base = $('base').attr('href');
  62. if (base) {
  63. // remove anything after the last '/'
  64. base = base.replace(/\/[^\/]+$/,'/');
  65. }
  66. if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
  67. if ($$.attr('src')) {
  68. if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image
  69. // use source tag value if set
  70. var source = (base && $$.attr('src').search(/^(\/|http:)/i)) ? base + $$.attr('src') : $$.attr('src');
  71. // apply filter
  72. $$.css({filter:hack.filter(source), width:$$.width(), height:$$.height()})
  73. .attr({src:$.ifixpng.getPixel()})
  74. .positionFix();
  75. }
  76. }
  77. } else { // hack png css properties present inside css
  78. var image = $$.css('backgroundImage');
  79. if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
  80. image = RegExp.$1;
  81. image = (base && image.substring(0,1)!='/') ? base + image : image;
  82. $$.css({backgroundImage:'none', filter:hack.filter(image)})
  83. .children().children().positionFix();
  84. }
  85. }
  86. });
  87. } : function() { return this; };
  88. /**
  89. * Removes any png hack that may have been applied previously
  90. *
  91. * $('img[src$=.png]').iunfixpng();
  92. * @desc revert hack on all images with png extensions
  93. *
  94. * $('#panel, img[src$=.png]').iunfixpng();
  95. * @desc revert hack on element #panel and all images with png extensions
  96. *
  97. * @name iunfixpng
  98. */
  99. $.fn.iunfixpng = hack.ltie7 ? function() {
  100. return this.each(function() {
  101. var $$ = $(this);
  102. var src = $$.css('filter');
  103. if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter
  104. src = RegExp.$1;
  105. if ($$.is('img') || $$.is('input')) {
  106. $$.attr({src:src}).css({filter:''});
  107. } else {
  108. $$.css({filter:'', background:'url('+src+')'});
  109. }
  110. }
  111. });
  112. } : function() { return this; };
  113. /**
  114. * positions selected item relatively
  115. */
  116. $.fn.positionFix = function() {
  117. return this.each(function() {
  118. var $$ = $(this);
  119. var position = $$.css('position');
  120. if (position != 'absolute' && position != 'relative') {
  121. $$.css({position:'relative'});
  122. }
  123. });
  124. };
  125. })(jQuery);