Skip to content
This repository
Browse code

Got it working in IE6 by just using gifs. Screw you IE6.

  • Loading branch information...
commit 592cfb8b3a0f203695d3b4750790c12d8cca9446 1 parent 6dadca0
John Nunemaker authored
BIN  fireworks/closebox.png
BIN  fireworks/shadow.png
BIN  images/bl.gif
BIN  images/bm.gif
BIN  images/bm.png
BIN  images/br.gif
BIN  images/closebox.gif
BIN  images/ml.gif
BIN  images/ml.png
BIN  images/mr.gif
BIN  images/mr.png
BIN  images/tl.gif
BIN  images/tm.gif
BIN  images/tm.png
BIN  images/tr.gif
BIN  images/x.gif
2  index.html
@@ -19,7 +19,7 @@
19 19 </script>
20 20
21 21 <style type="text/css" media="screen">
22   - body {font-family:Helvetica, Arial, sans-serif;}
  22 + body {font-family:Helvetica, Arial, sans-serif; background:#ccc;}
23 23 p {margin:0; padding:0;}
24 24 #small_box {width:150px; height:100px;}
25 25 #medium_box {width:300px; height:200px;}
38 js/fancyzoom.js
@@ -46,6 +46,13 @@ var FancyZoomBox = {
46 46 if (FancyZoomBox.setup) return;
47 47 FancyZoomBox.setup = true;
48 48
  49 + var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
  50 + if (ie) {
  51 + var version = parseInt(ie[1]);
  52 + Prototype.Browser['IE' + version.toString()] = true;
  53 + Prototype.Browser.ltIE7 = (version < 7) ? true : false;
  54 + }
  55 +
49 56 var html = '<div id="zoom" style="display:none;"> \
50 57 <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
51 58 <tbody> \
@@ -84,6 +91,11 @@ var FancyZoomBox = {
84 91 FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
85 92 FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
86 93 FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
  94 +
  95 + // just use gifs as ie6 and below suck
  96 + if (Prototype.Browser.ltIE7) {
  97 + FancyZoomBox.switchBackgroundImagesTo('gif');
  98 + }
87 99 },
88 100
89 101 show: function(e) {
@@ -165,21 +177,27 @@ var FancyZoomBox = {
165 177 ], { duration: 0.5 });
166 178 },
167 179
  180 + // switches the backgrounds of the cells and the close image to png's or gif's
  181 + // fixes ie's issues with fading and appearing transparent png's with
  182 + // no background and ie6's craptacular handling of transparent png's
  183 + switchBackgroundImagesTo: function(to) {
  184 + FancyZoomBox.cells.each(function(td) {
  185 + var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
  186 + td.setStyle('background-image: ' + bg);
  187 + });
  188 + var close_img = FancyZoomBox.zoom_close.firstDescendant();
  189 + var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
  190 + close_img.writeAttribute('src', new_img);
  191 + },
  192 +
168 193 // prevents the thick black border that happens when appearing or fading png in IE
169 194 fixBackgroundsForIE: function() {
170   - if (Prototype.Browser.IE) {
171   - FancyZoomBox.cells.each(function(td) {
172   - td.setStyle('background-color:#fff');
173   - });
174   - }
  195 + if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
175 196 },
176 197
  198 + // swaps back to png's for prettier shadows
177 199 unfixBackgroundsForIE: function() {
178   - if (Prototype.Browser.IE) {
179   - FancyZoomBox.cells.each(function(td) {
180   - td.setStyle('background-color:none');
181   - });
182   - }
  200 + if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
183 201 }
184 202 }
185 203

0 comments on commit 592cfb8

Please sign in to comment.
Something went wrong with that request. Please try again.