Permalink
Browse files

Working for IE now

  • Loading branch information...
1 parent cbf1cd8 commit 780cfa1f4b33f4da76a28f4de04ff36016f33782 Chris Van Pelt committed Sep 14, 2008
Showing with 30 additions and 9 deletions.
  1. +1 −1 mootools/index.html
  2. +28 −7 mootools/js/fancyzoom.js
  3. +1 −1 mootools/js/fancyzoom.min.js
View
@@ -5,7 +5,7 @@
<title>Fancy Zoom by John Nunemaker</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="js/mootools.1.2.js"></script>
- <script type="text/javascript" src="js/fancyzoom.min.js"></script>
+ <script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEvent('domready', function() {
$$("div.photo a").each(function(el) { new FancyZoom(el, {scaleImg:true}); })
@@ -21,7 +21,7 @@ var FancyZoom = new Class({
}
},
setup: function() {
- var ext = (Browser.Engine.trident && !Browser.Engine.trident5) ? 'gif' : 'png'
+ var ext = Browser.Engine.trident ? 'gif' : 'png'
var html = '<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
<tbody> \
<tr> \
@@ -47,7 +47,7 @@ var FancyZoom = new Class({
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \
<img src="' + this.options.directory + '/closebox.'+ext+'" alt="Close" style="border:none; margin:0; padding:0;" /> \
</a>';
- document.body.grab(new Element('div', {id:"zoom", style:"display:none", html: html}));
+ $(document.body).grab(new Element('div', {id:"zoom", style:"display:none", html: html}));
//Setup the FX as class methods
FancyZoom.showFx = new Fx.Morph($('zoom'), {
duration: 500,
@@ -67,6 +67,7 @@ var FancyZoom = new Class({
if (!element.retrieve('scaleImg'))
$('zoom_content').set('html', element.retrieve('content_div').get('html'));
$('zoom_close').setStyle('display', '');
+ FancyZoom.unfixBackgroundsForIE();
}
})
FancyZoom.hideFx = new Fx.Morph($('zoom'), {
@@ -77,15 +78,15 @@ var FancyZoom = new Class({
$('zoom_close').setStyle('display', 'none');
},
onComplete: function(element) {
- element.setStyle('display', 'none')
+ element.setStyle('display', 'none');
+ FancyZoom.unfixBackgroundsForIE();
}
})
//Attach the events only once
$('zoom_close').addEvent('click', FancyZoom.hide);
// hide zoom if click fired is not inside zoom
$$('html')[0].addEvent('click', function(e) {
- var click_in_zoom = e.target.match('#zoom') ? e.target : e.target.getParent('#zoom');
- if (!click_in_zoom)
+ if (!($(e.target).match('#zoom') || $(e.target).getParent('#zoom')))
FancyZoom.hide(e);
});
// esc to close zoom box
@@ -97,7 +98,7 @@ var FancyZoom = new Class({
});
FancyZoom.show = function(e) {
e.stop();
- var element = e.target.match('a') ? e.target : e.target.getParent('a');
+ var element = $(e.target).match('a') ? e.target : e.target.getParent('a');
var content_div = element.retrieve('content_div')
var width = (element.retrieve('zoom_width') || content_div.getWidth()) + 60;
var height = (element.retrieve('zoom_height') || content_div.getHeight()) + 60;
@@ -120,7 +121,7 @@ FancyZoom.show = function(e) {
width : 1,
height : 1
});
-
+ FancyZoom.fixBackgroundsForIE();
FancyZoom.showFx.start({
opacity: 1,
top: newTop,
@@ -130,10 +131,30 @@ FancyZoom.show = function(e) {
}
FancyZoom.hide = function(e) {
e.stop();
+ FancyZoom.fixBackgroundsForIE();
FancyZoom.hideFx.start({
left: $('zoom').retrieve('curLeft'),
top: $('zoom').retrieve('curTop'),
width: 1,
height: 1,
opacity: 0});
+}
+FancyZoom.switchBackgroundImagesTo = function(to) {
+ $$('#zoom_table td').each(function(e) {
+ var bg = e.getStyle('background-image').replace(/\.(png|gif|none)\)$/, '.'+to+')');
+ e.setStyle('background-image', bg);
+ });
+ var close_img = zoom_close.getElement('img');
+ var new_img = close_img.get('src').replace(/\.(png|gif|none)$/, '.' + to);
+ close_img.set('src', new_img);
+}
+FancyZoom.fixBackgroundsForIE = function() {
+ if (Browser.Engine.trident5) {
+ FancyZoom.switchBackgroundImagesTo('gif');
+ }
+}
+FancyZoom.unfixBackgroundsForIE = function() {
+ if (Browser.Engine.trident5) {
+ FancyZoom.switchBackgroundImagesTo('png');
+ }
}
@@ -1 +1 @@
-var FancyZoom=new Class({Implements:Options,options:{directory:"images",scaleImg:false,width:null,height:null},initialize:function(B,A){this.setOptions(A);if(!$("zoom")){this.setup()}this.element=$(B);if(this.element){this.element.store("content_div",$(this.element.get("href").match(/#(.+)$/)[1]).setStyles({display:"block",position:"absolute",visibility:"hidden"}));this.element.store("scaleImg",this.options.scaleImg);this.element.store("zoom_width",this.options.width);this.element.store("zoom_height",this.options.height);this.element.addEvent("click",FancyZoom.show)}},setup:function(){var B=(Browser.Engine.trident&&!Browser.Engine.trident5)?"gif":"png";var A='<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> <tbody> <tr> <td class="tl" style="background:url('+this.options.directory+"/tl."+B+') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> <td class="tm" style="background:url('+this.options.directory+"/tm."+B+') 0 0 repeat-x; height:20px; overflow:hidden;" /> <td class="tr" style="background:url('+this.options.directory+"/tr."+B+') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> </tr> <tr> <td class="ml" style="background:url('+this.options.directory+"/ml."+B+') 0 0 repeat-y; width:20px; overflow:hidden;" /> <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> <div id="zoom_content"> </div> </td> <td class="mr" style="background:url('+this.options.directory+"/mr."+B+') 100% 0 repeat-y; width:20px; overflow:hidden;" /> </tr> <tr> <td class="bl" style="background:url('+this.options.directory+"/bl."+B+') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> <td class="bm" style="background:url('+this.options.directory+"/bm."+B+') 0 100% repeat-x; height:20px; overflow:hidden;" /> <td class="br" style="background:url('+this.options.directory+"/br."+B+') 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> </tr> </tbody> </table> <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> <img src="'+this.options.directory+"/closebox."+B+'" alt="Close" style="border:none; margin:0; padding:0;" /> </a>';document.body.grab(new Element("div",{id:"zoom",style:"display:none",html:A}));FancyZoom.showFx=new Fx.Morph($("zoom"),{duration:500,onStart:function(C){if(C.retrieve("scaleImg")){$("zoom_content").set("html",C.retrieve("content_div").get("html"));$$("#zoom_content img").setStyle("width","100%")}else{$("zoom_content").set("html","")}if(Browser.trident){$A([$$("td.ml"),$$("td.mm"),$$("td.mr")]).flatten().setStyle("height",(height-40))}},onComplete:function(C){if(!C.retrieve("scaleImg")){$("zoom_content").set("html",C.retrieve("content_div").get("html"))}$("zoom_close").setStyle("display","")}});FancyZoom.hideFx=new Fx.Morph($("zoom"),{duration:500,onStart:function(C){if(!C.retrieve("scaleImg")){$("zoom_content").set("html","")}$("zoom_close").setStyle("display","none")},onComplete:function(C){C.setStyle("display","none")}});$("zoom_close").addEvent("click",FancyZoom.hide);$$("html")[0].addEvent("click",function(D){var C=D.target.match("#zoom")?D.target:D.target.getParent("#zoom");if(!C){FancyZoom.hide(D)}});$(document).addEvent("keyup",function(C){if(C.key=="esc"){FancyZoom.hide(C)}})}});FancyZoom.show=function(E){E.stop();var D=E.target.match("a")?E.target:E.target.getParent("a");var A=D.retrieve("content_div");var B=(D.retrieve("zoom_width")||A.getWidth())+60;var I=(D.retrieve("zoom_height")||A.getHeight())+60;var F=window.getSize();var C=window.getScrollTop();var G=Math.max((F.y/2)-(I/2)+C,0);var H=(F.x/2)-(B/2);$("zoom").store("curTop",E.client.y);$("zoom").store("curLeft",E.client.x);$("zoom").store("content_div",A);$("zoom").store("scaleImg",D.retrieve("scaleImg"));$("zoom").setStyles({position:"absolute",display:"block",opacity:0,top:E.client.y,left:E.client.x,width:1,height:1});FancyZoom.showFx.start({opacity:1,top:G,left:H,width:B,height:I})};FancyZoom.hide=function(A){A.stop();FancyZoom.hideFx.start({left:$("zoom").retrieve("curLeft"),top:$("zoom").retrieve("curTop"),width:1,height:1,opacity:0})};
+var FancyZoom=new Class({Implements:Options,options:{directory:"images",scaleImg:false,width:null,height:null},initialize:function(B,A){this.setOptions(A);if(!$("zoom")){this.setup()}this.element=$(B);if(this.element){this.element.store("content_div",$(this.element.get("href").match(/#(.+)$/)[1]).setStyles({display:"block",position:"absolute",visibility:"hidden"}));this.element.store("scaleImg",this.options.scaleImg);this.element.store("zoom_width",this.options.width);this.element.store("zoom_height",this.options.height);this.element.addEvent("click",FancyZoom.show)}},setup:function(){var B=Browser.Engine.trident?"gif":"png";var A='<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> <tbody> <tr> <td class="tl" style="background:url('+this.options.directory+"/tl."+B+') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> <td class="tm" style="background:url('+this.options.directory+"/tm."+B+') 0 0 repeat-x; height:20px; overflow:hidden;" /> <td class="tr" style="background:url('+this.options.directory+"/tr."+B+') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> </tr> <tr> <td class="ml" style="background:url('+this.options.directory+"/ml."+B+') 0 0 repeat-y; width:20px; overflow:hidden;" /> <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> <div id="zoom_content"> </div> </td> <td class="mr" style="background:url('+this.options.directory+"/mr."+B+') 100% 0 repeat-y; width:20px; overflow:hidden;" /> </tr> <tr> <td class="bl" style="background:url('+this.options.directory+"/bl."+B+') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> <td class="bm" style="background:url('+this.options.directory+"/bm."+B+') 0 100% repeat-x; height:20px; overflow:hidden;" /> <td class="br" style="background:url('+this.options.directory+"/br."+B+') 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> </tr> </tbody> </table> <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> <img src="'+this.options.directory+"/closebox."+B+'" alt="Close" style="border:none; margin:0; padding:0;" /> </a>';$(document.body).grab(new Element("div",{id:"zoom",style:"display:none",html:A}));FancyZoom.showFx=new Fx.Morph($("zoom"),{duration:500,onStart:function(C){if(C.retrieve("scaleImg")){$("zoom_content").set("html",C.retrieve("content_div").get("html"));$$("#zoom_content img").setStyle("width","100%")}else{$("zoom_content").set("html","")}if(Browser.trident){$A([$$("td.ml"),$$("td.mm"),$$("td.mr")]).flatten().setStyle("height",(height-40))}},onComplete:function(C){if(!C.retrieve("scaleImg")){$("zoom_content").set("html",C.retrieve("content_div").get("html"))}$("zoom_close").setStyle("display","");FancyZoom.unfixBackgroundsForIE()}});FancyZoom.hideFx=new Fx.Morph($("zoom"),{duration:500,onStart:function(C){if(!C.retrieve("scaleImg")){$("zoom_content").set("html","")}$("zoom_close").setStyle("display","none")},onComplete:function(C){C.setStyle("display","none");FancyZoom.unfixBackgroundsForIE()}});$("zoom_close").addEvent("click",FancyZoom.hide);$$("html")[0].addEvent("click",function(C){if(!($(C.target).match("#zoom")||$(C.target).getParent("#zoom"))){FancyZoom.hide(C)}});$(document).addEvent("keyup",function(C){if(C.key=="esc"){FancyZoom.hide(C)}})}});FancyZoom.show=function(E){E.stop();var D=$(E.target).match("a")?E.target:E.target.getParent("a");var A=D.retrieve("content_div");var B=(D.retrieve("zoom_width")||A.getWidth())+60;var I=(D.retrieve("zoom_height")||A.getHeight())+60;var F=window.getSize();var C=window.getScrollTop();var G=Math.max((F.y/2)-(I/2)+C,0);var H=(F.x/2)-(B/2);$("zoom").store("curTop",E.client.y);$("zoom").store("curLeft",E.client.x);$("zoom").store("content_div",A);$("zoom").store("scaleImg",D.retrieve("scaleImg"));$("zoom").setStyles({position:"absolute",display:"block",opacity:0,top:E.client.y,left:E.client.x,width:1,height:1});FancyZoom.fixBackgroundsForIE();FancyZoom.showFx.start({opacity:1,top:G,left:H,width:B,height:I})};FancyZoom.hide=function(A){A.stop();FancyZoom.fixBackgroundsForIE();FancyZoom.hideFx.start({left:$("zoom").retrieve("curLeft"),top:$("zoom").retrieve("curTop"),width:1,height:1,opacity:0})};FancyZoom.switchBackgroundImagesTo=function(C){$$("#zoom_table td").each(function(E){var D=E.getStyle("background-image").replace(/\.(png|gif|none)\)$/,"."+C+")");E.setStyle("background-image",D)});var B=zoom_close.getElement("img");var A=B.get("src").replace(/\.(png|gif|none)$/,"."+C);B.set("src",A)};FancyZoom.fixBackgroundsForIE=function(){if(Browser.Engine.trident5){FancyZoom.switchBackgroundImagesTo("gif")}};FancyZoom.unfixBackgroundsForIE=function(){if(Browser.Engine.trident5){FancyZoom.switchBackgroundImagesTo("png")}};

0 comments on commit 780cfa1

Please sign in to comment.