Posted By

marcio on 03/05/10


Tagged

css image images jasvacript


Versions (?)

Fluid images


 / Published in: JavaScript
 

URL: http://unstoppablerobotninja.com/entry/fluid-images/

Para redimensionar imagenes segun el tamaƱo del navegador, muy util

  1. //usage
  2. //simple
  3. addLoadEvent(function() {
  4. imgSizer.collate();
  5. });
  6.  
  7. //limiting the scope
  8. addLoadEvent(function() {
  9. if (document.getElementById && document.getElementsByTagName) {
  10. var aImgs = document.getElementById("#content").getElementsByTagName("img");
  11. imgSizer.collate(aImgs);
  12. }
  13. });
  14.  
  15. function addLoadEvent(func) {
  16. var oldonload = window.onload;
  17. if (typeof window.onload != 'function') {
  18. window.onload = func;
  19. } else {
  20. window.onload = function() {
  21. if (oldonload) {
  22. oldonload();
  23. }
  24. func();
  25. }
  26. }
  27. }
  28.  
  29.  
  30. //code
  31. var imgSizer = {
  32. Config : {
  33. imgCache : []
  34. ,spacer : "/path/to/your/spacer.gif"
  35. }
  36.  
  37. ,collate : function(aScope) {
  38. var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
  39. if (isOldIE && document.getElementsByTagName) {
  40. var c = imgSizer;
  41. var imgCache = c.Config.imgCache;
  42.  
  43. var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
  44. for (var i = 0; i < images.length; i++) {
  45. images[i].origWidth = images[i].offsetWidth;
  46. images[i].origHeight = images[i].offsetHeight;
  47.  
  48. imgCache.push(images[i]);
  49. c.ieAlpha(images[i]);
  50. images[i].style.width = "100%";
  51. }
  52.  
  53. if (imgCache.length) {
  54. c.resize(function() {
  55. for (var i = 0; i < imgCache.length; i++) {
  56. var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
  57. imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
  58. }
  59. });
  60. }
  61. }
  62. }
  63.  
  64. ,ieAlpha : function(img) {
  65. var c = imgSizer;
  66. if (img.oldSrc) {
  67. img.src = img.oldSrc;
  68. }
  69. var src = img.src;
  70. img.style.width = img.offsetWidth + "px";
  71. img.style.height = img.offsetHeight + "px";
  72. img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
  73. img.oldSrc = src;
  74. img.src = c.Config.spacer;
  75. }
  76.  
  77. // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
  78. ,resize : function(func) {
  79. var oldonresize = window.onresize;
  80. if (typeof window.onresize != 'function') {
  81. window.onresize = func;
  82. } else {
  83. window.onresize = function() {
  84. if (oldonresize) {
  85. oldonresize();
  86. }
  87. func();
  88. }
  89. }
  90. }
  91. }

Report this snippet  

You need to login to post a comment.