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

jnunemaker · Aug 7, 2008 · 592cfb8 · 592cfb8
1 parent 6dadca0
commit 592cfb8
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 11 deletions.
diff --git a/fireworks/closebox.png b/fireworks/closebox.png
diff --git a/fireworks/shadow.png b/fireworks/shadow.png
diff --git a/images/bl.gif b/images/bl.gif
diff --git a/images/bm.gif b/images/bm.gif
diff --git a/images/bm.png b/images/bm.png
diff --git a/images/br.gif b/images/br.gif
diff --git a/images/closebox.gif b/images/closebox.gif
diff --git a/images/ml.gif b/images/ml.gif
diff --git a/images/ml.png b/images/ml.png
diff --git a/images/mr.gif b/images/mr.gif
diff --git a/images/mr.png b/images/mr.png
diff --git a/images/tl.gif b/images/tl.gif
diff --git a/images/tm.gif b/images/tm.gif
diff --git a/images/tm.png b/images/tm.png
diff --git a/images/tr.gif b/images/tr.gif
diff --git a/images/x.gif b/images/x.gif
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
 	</script>
 
 	<style type="text/css" media="screen">
-		body {font-family:Helvetica, Arial, sans-serif;}
+		body {font-family:Helvetica, Arial, sans-serif; background:#ccc;}
 		p {margin:0; padding:0;}
 		#small_box 		{width:150px; height:100px;}
 		#medium_box 	{width:300px; height:200px;}

diff --git a/js/fancyzoom.js b/js/fancyzoom.js
@@ -46,6 +46,13 @@ var FancyZoomBox = {
     if (FancyZoomBox.setup) return;
     FancyZoomBox.setup = true;
 
+    var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
+    if (ie) {
+      var version = parseInt(ie[1]);
+      Prototype.Browser['IE' + version.toString()] = true;
+      Prototype.Browser.ltIE7 = (version < 7) ? true : false;
+    }
+
     var html = '<div id="zoom" style="display:none;"> \
                   <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
                     <tbody> \
@@ -84,6 +91,11 @@ var FancyZoomBox = {
     FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
     FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
     FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
+
+    // just use gifs as ie6 and below suck
+    if (Prototype.Browser.ltIE7) {
+      FancyZoomBox.switchBackgroundImagesTo('gif');
+    }    
   },
 
   show: function(e) {
@@ -165,21 +177,27 @@ var FancyZoomBox = {
 		], { duration: 0.5 });
   },
 
+  // switches the backgrounds of the cells and the close image to png's or gif's
+  // fixes ie's issues with fading and appearing transparent png's with 
+  // no background and ie6's craptacular handling of transparent png's
+  switchBackgroundImagesTo: function(to) {
+    FancyZoomBox.cells.each(function(td) {
+      var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
+      td.setStyle('background-image: ' + bg);
+    });
+    var close_img = FancyZoomBox.zoom_close.firstDescendant();
+    var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
+    close_img.writeAttribute('src', new_img);
+  },
+
   // prevents the thick black border that happens when appearing or fading png in IE
 	fixBackgroundsForIE: function() {
-    if (Prototype.Browser.IE) {
+    if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
-      FancyZoomBox.cells.each(function(td) {
-        td.setStyle('background-color:#fff');
-      });
-    }
 	},
 
+	// swaps back to png's for prettier shadows
 	unfixBackgroundsForIE: function() {
-    if (Prototype.Browser.IE) {
+    if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
-      FancyZoomBox.cells.each(function(td) {
-        td.setStyle('background-color:none');
-      });
-    }
 	}
 }