Skip to content
Browse files

Merge branch 'vanpelt/master'

  • Loading branch information...
2 parents 66f2a6d + f9c5441 commit 2f4d950113d4dd7561627c3a928f6c70169cf799 @jnunemaker committed
View
BIN mootools/images/bl.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/bl.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/bm.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/bm.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/br.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/br.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/closebox.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/closebox.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/loading.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/ml.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/ml.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/mr.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/mr.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tl.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tl.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tm.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tm.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tr.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN mootools/images/tr.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
203 mootools/index.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <title>Fancy Zoom by Chris Van Pelt &amp; John Nunemaker</title>
+ <link rel="stylesheet" href="../css/common.css" type="text/css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.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,
+ onShow: function(e) {
+ var fancy = this
+ var a = fancy.content_div.getElement('a')
+ if(a && a.getElement('.loading')) {
+ var loaded = function() {
+ fancy.loaded = true
+ fancy.options.width = this.width
+ fancy.options.height = this.height
+ a.empty().adopt(this)
+ FancyZoom.show(e)
+ }
+ var image = new Image()
+ image.onload = loaded
+ image.src = a.href
+ }
+ },
+ max: 480
+ })
+ })
+ new FancyZoom('medium_box_link', {width:400, height:300});
+ new FancyZoom('large_box_link');
+ new FancyZoom('flash_box_link');
+ });
+ </script>
+
+ <style type="text/css" media="screen">
+ #large_box {width:800; height:600;}
+ </style>
+</head>
+<body>
+<div id="wrapper">
+ <div id="header">
+ <h1>Fancy Zoom (Mootools)</h1>
+ <p>Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser.</p>
+
+ <ul id="nav">
+ <li><a href="../jquery/index.html">jQuery</a></li>
+ <li><a href="../jquery/index.html">Prototype</a></li>
+ <li><a href="http://github.com/jnunemaker/fancy-zoom/">Github</a></li>
+ <li><a href="http://jnunemaker.lighthouseapp.com/projects/16389-fancyzoom/overview">Lighthouse</a></li>
+ </ul>
+ </div>
+
+ <div id="content">
+ <p>This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.</p>
+
+ <h2>Demos</h2>
+
+ <div id="photos">
+ <h3>Images</h3>
+ <div class="photo">
+ <a href="#github">
+ <img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25_s.jpg" alt="Github helmet" />
+ </a>
+ </div>
+ <div class="photo">
+ <a href="#hotdog">
+ <img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Hotdog" />
+ </a>
+ </div>
+ <div class="photo">
+ <a href="#turtles">
+ <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Turtles" />
+ </a>
+ </div>
+
+ <div id="github">
+ <a href="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg#helmet">
+ <img src="./images/loading.gif" alt="loading" class="loading" />
+ </a>
+ </div>
+ <div id="hotdog">
+ <a href="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg#hotdog">
+ <img src="./images/loading.gif" alt="loading" class="loading" />
+ </a>
+ </div>
+ <div id="turtles">
+ <img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455.jpg" alt="Turtles" />
+ <p id="turtles_caption">It's true, they do bite!</p>
+ </div>
+ </div>
+
+ <div id="text">
+ <h3>Text</h3>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. <a href="#medium_box" id="medium_box_link">Here is a medium box</a> blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. <a href="#large_box" id="large_box_link">Here is a large box</a>. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula. <a href="#flash_box" id ="flash_box_link">You can even embed flash</a>.</p>
+
+ <div id="medium_box">
+ <h2>Here is a medium box</h2>
+ <p><strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
+ </div>
+
+ <div id="large_box">
+ <h2>Here is a large box</h2>
+ <p><strong>The width and height for this box are inferred from css. See the style tag in the &lt;head&gt; of this document.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
+
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
+ </div>
+
+ <div id="flash_box">
+ <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.flickr.com/apps/video/stewart.swf?v=59154" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
+ <param name="flashvars" value="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377"></param>
+ <param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=59154"></param>
+ <param name="bgcolor" value="#000000"></param>
+ <param name="allowFullScreen" value="true"></param>
+ <embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=59154" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&amp;photo_secret=1869930911&amp;photo_id=2756538377" height="300" width="400"></embed>
+ </object>
+ </div>
+ </div>
+
+ <h2>Installation</h2>
+
+ <p>Add the following scripts and checkout the notes below (or view the source of this page).</p>
+
+<pre><code>&lt;script "http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="js/fancyzoom.js"&gt;&lt;/script&gt;</code></pre>
+
+ <h2>Notes</h2>
+ <p>new FancyZoom(id) where id is the id of the <a> tag you would like to zoom. The <a> tag should have an href that anchors to the id of the box that contains the contents that should be zoomed. For example:</p>
+
+ <pre><code>&lt;a href="#small_box" id="small"&gt;Small Box!&lt;/a&gt;
+&lt;div id="small_box"&gt;
+ &lt;p&gt;Here is the contents that will appear in the zoom.&lt;/p&gt;
+&lt;/div&gt;
+&lt;script type="text/javascript"&gt;
+ new FancyZoom('small');
+&lt;/script&gt;
+
+// other examples
+&lt;script type="text/javascript"&gt;
+ window.addEvent('domready', function() {
+ $$('a.fancy').each(function(el) { new FancyZoom(el, {width:500, height:300}); });
+
+ new FancyZoom('small', {scaleImg: true}); // Scales images inside while zooming
+
+ new FancyZoom('medium');
+
+ // width and height are optional. defaults to css specifications of width and height.
+ // if width and height are passed in, they override whatever may be in css.
+ new FancyZoom('large', {width:600, height:400});
+
+ /* This is an example of loading the image dynamically once the zoom is initiated.
+ * This particular example assumes that you have a link inside of your content div
+ * which contains an element (a spinning gif loader) with the class loading. eg:
+ * &lt;a href="#"&gt;&lt;img src="/images/loading.gif" alt="loading" class="loading"/&gt;&lt;/a&gt;
+ * The first two images above are loaded this way
+ */
+ new FancyZoom('custom', {
+ scaleImg: true,
+ onShow: function(e) {
+ var fancy = this
+ var a = fancy.content_div.getElement('a')
+ if(a.getElement('.loading')) {
+ var loaded = function() {
+ fancy.loaded = true
+ fancy.options.width = this.width
+ fancy.options.height = this.height
+ a.empty().adopt(this)
+ FancyZoom.show(e)
+ }
+ var image = new Image()
+ image.onload = loaded
+ image.src = a.href
+ }
+ },
+ //Make the images no wider than 480
+ max:480
+ })
+ });
+&lt;/script&gt;</code></pre>
+
+ <p>If the images are not in a directory named 'images' that is relative to the html file you can configure it like so:</p>
+
+<pre><code>&lt;script type="text/javascript"&gt;
+ // note that once this option is passed in, it remains the same for every other instance of FancyZoom on the same page
+ new FancyZoom('medium', {directory:'directory'});
+&lt;/script&gt;</code></pre>
+
+ </div>
+
+ <div id="footer">
+ <p>
+ Created by <a href="http://vandev.com">Chris Van Pelt</a> of <a href="http://doloreslabs.com/">Dolores Labs</a> | original implementation by
+ <a href="http://orderedlist.com/contact/">John Nunemaker</a>
+ </p>
+ </div>
+</div>
+</body>
+</html>
View
177 mootools/js/fancyzoom.js
@@ -0,0 +1,177 @@
+var FancyZoom = new Class({
+ Implements: [Options, Events],
+ options: {
+ /*
+ onShow: $empty,
+ onHide: $empty,
+ */
+ scaleImg: false,
+ // The directory option is global to all future instances of FancyZoom on the same page
+ directory : 'images',
+ width: null,
+ height: null,
+ // This directive will force the zoom to scale to a maximum of 1024px wide
+ max: 1024
+ },
+ initialize: function(element, options) {
+ this.setOptions(options)
+ if(!$('zoom'))
+ this.setup()
+ this.element = $(element)
+ if (this.element) {
+ this.content_div = $(this.element.get('href').match(/#(.+)$/)[1]).setStyles({display:'block', position:'absolute', visibility:'hidden'});
+ this.element.store('fancy', this)
+ this.element.addEvent('click', FancyZoom.show);
+ }
+ },
+ setup: function() {
+ var ext = Browser.Engine.trident ? 'gif' : 'png'
+ var html = '<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
+ <tbody> \
+ <tr> \
+ <td class="tl" style="background:url(' + this.options.directory + '/tl.'+ext+') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
+ <td class="tm" style="background:url(' + this.options.directory + '/tm.'+ext+') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
+ <td class="tr" style="background:url(' + this.options.directory + '/tr.'+ext+') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
+ </tr> \
+ <tr> \
+ <td class="ml" style="background:url(' + this.options.directory + '/ml.'+ext+') 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.'+ext+') 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
+ </tr> \
+ <tr> \
+ <td class="bl" style="background:url(' + this.options.directory + '/bl.'+ext+') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \
+ <td class="bm" style="background:url(' + this.options.directory + '/bm.'+ext+') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
+ <td class="br" style="background:url(' + this.options.directory + '/br.'+ext+') 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.'+ext+'" alt="Close" style="border:none; margin:0; padding:0;" /> \
+ </a>';
+ $(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'), {
+ link: 'cancel',
+ onStart: function(element) {
+ var fancy = element.retrieve('fancy')
+ if(fancy.options.scaleImg) {
+ fancy.content_div.getElements('img').setStyles({'width': 50, 'height':'auto'})
+ $('zoom_content').set('html', fancy.content_div.get('html'));
+ //This is still broken in IE
+ $$('#zoom_content img').tween('width', this.to.width[0].value - 60)
+ } else
+ $('zoom_content').set('html','');
+ },
+ onComplete: function(element) {
+ FancyZoom.zoomed = true;
+ var fancy = element.retrieve('fancy')
+ fancy.loaded = false
+ if (!fancy.options.scaleImg)
+ $('zoom_content').set('html', fancy.content_div.get('html'));
+ // middle row height must be set for IE otherwise it tries to be "logical" with the height
+ if(Browser.Engine.trident)
+ $$('td.ml, td.mm, td.mr').setStyle('height', this.to.height[0].value - 60);
+ $('zoom_close').setStyle('display', '');
+ FancyZoom.unfixBackgroundsForIE();
+ }
+ })
+ FancyZoom.hideFx = new Fx.Morph($('zoom'), {
+ onStart: function(element) {
+ if (!element.retrieve('fancy').scaleImg)
+ $('zoom_content').set({'html': '', 'style':''})
+ $('zoom_close').setStyle('display', 'none');
+ },
+ onComplete: function(element) {
+ FancyZoom.zoomed = false;
+ 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) {
+ if (!($(e.target).match('#zoom') || $(e.target).getParent('#zoom')))
+ FancyZoom.hide(e);
+ });
+ // esc to close zoom box
+ $(document).addEvent('keyup', function(e) {
+ if (e.key == 'esc')
+ FancyZoom.hide(e);
+ });
+ }
+});
+FancyZoom.zoomed = false;
+FancyZoom.show = function(e) {
+ e.stop();
+ var element = $(e.target).match('a') ? e.target : e.target.getParent('a');
+ var fancy = element.retrieve('fancy')
+ var width = (fancy.options.width || fancy.content_div.getWidth()) + 60;
+ var height = (fancy.options.height || fancy.content_div.getHeight()) + 60;
+ //Make the image a maximum of 1024px wide
+ var height = (Math.min(fancy.options.max, width) / width) * height
+ var width = Math.min(fancy.options.max, width)
+ var d = Window.getSize();
+ var yOffset = Window.getScrollTop();
+ // ensure that newTop is at least 0 so it doesn't hide close button
+ var newTop = Math.max((d.y/2) - (height/2) + yOffset, 0);
+ var newLeft = (d.x/2) - (width/2);
+ if(!fancy.loaded) {
+ $('zoom').store('curTop', e.page.y);
+ $('zoom').store('curLeft', e.page.x);
+ $('zoom').store('fancy', fancy);
+ $('zoom').setStyles({
+ position : 'absolute',
+ display : 'block',
+ opacity : 0,
+ top : e.page.y,
+ left : e.page.x,
+ width : 1,
+ height : 1
+ });
+ //So we need a delay for IE to be happy....
+ fancy.fireEvent('show', {stop:$empty, target:element, page: e.page}, 100)
+ }
+ FancyZoom.fixBackgroundsForIE();
+ FancyZoom.showFx.start({
+ opacity: 1,
+ top: newTop,
+ left: newLeft,
+ width: width,
+ height: height})
+}
+FancyZoom.hide = function(e) {
+ if(!FancyZoom.zoomed)
+ return
+ e.stop();
+ $('zoom').retrieve('fancy').fireEvent('hide')
+ 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');
+ }
+}
View
1 mootools/js/fancyzoom.min.js
@@ -0,0 +1 @@
+var FancyZoom=new Class({Implements:[Options,Events],options:{scaleImg:false,directory:"images",width:null,height:null,max:1024},initialize:function(B,A){this.setOptions(A);if(!$("zoom")){this.setup()}this.element=$(B);if(this.element){this.content_div=$(this.element.get("href").match(/#(.+)$/)[1]).setStyles({display:"block",position:"absolute",visibility:"hidden"});this.element.store("fancy",this);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"),{link:"cancel",onStart:function(D){var C=D.retrieve("fancy");if(C.options.scaleImg){C.content_div.getElements("img").setStyles({width:50,height:"auto"});$("zoom_content").set("html",C.content_div.get("html"));$$("#zoom_content img").tween("width",this.to.width[0].value-60)}else{$("zoom_content").set("html","")}},onComplete:function(D){FancyZoom.zoomed=true;var C=D.retrieve("fancy");C.loaded=false;if(!C.options.scaleImg){$("zoom_content").set("html",C.content_div.get("html"))}if(Browser.Engine.trident){$$("td.ml, td.mm, td.mr").setStyle("height",this.to.height[0].value-60)}$("zoom_close").setStyle("display","");FancyZoom.unfixBackgroundsForIE()}});FancyZoom.hideFx=new Fx.Morph($("zoom"),{onStart:function(C){if(!C.retrieve("fancy").scaleImg){$("zoom_content").set({html:"",style:""})}$("zoom_close").setStyle("display","none")},onComplete:function(C){FancyZoom.zoomed=false;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.zoomed=false;FancyZoom.show=function(E){E.stop();var D=$(E.target).match("a")?E.target:E.target.getParent("a");var A=D.retrieve("fancy");var B=(A.options.width||A.content_div.getWidth())+60;var I=(A.options.height||A.content_div.getHeight())+60;var I=(Math.min(A.options.max,B)/B)*I;var B=Math.min(A.options.max,B);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);if(!A.loaded){$("zoom").store("curTop",E.page.y);$("zoom").store("curLeft",E.page.x);$("zoom").store("fancy",A);$("zoom").setStyles({position:"absolute",display:"block",opacity:0,top:E.page.y,left:E.page.x,width:1,height:1});A.fireEvent("show",{stop:$empty,target:D,page:E.page},100)}FancyZoom.fixBackgroundsForIE();FancyZoom.showFx.start({opacity:1,top:G,left:H,width:B,height:I})};FancyZoom.hide=function(A){if(!FancyZoom.zoomed){return }A.stop();$("zoom").retrieve("fancy").fireEvent("hide");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 2f4d950

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