Permalink
Browse files

Got it working in firefox but still needs tweaks.

  • Loading branch information...
1 parent 0429465 commit 45d8aa482b7a83ae81352cec035ad739e2cf4b0d @jnunemaker committed Aug 6, 2008
View
No changes.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -5,32 +5,41 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fancy Zoom Examples</title>
+ <link rel="stylesheet" href="css/fancyzoom.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript" charset="utf-8">
- $(document).observe('dom:loaded', function() {
- $$('a.fancy').each(function(el) { new FancyZoom(el); });
+ $(document).observe('dom:loaded', function() {
+ $w('small medium large').each(function(el) {
+ new FancyZoom(el);
+ });
});
</script>
<style type="text/css" media="screen">
- div.zoom {position:absolute; top:50%; left:50%; width:760px; height:413px; margin:-380px 0 0 -207px;}
- div.description {float:left; display:inline; margin:33px 20px 0 33px; width:195px;}
- div.description h3 {margin:0 0 10px; padding:0;}
- div.description p {margin:0 0 20px;}
- div.movie {margin:33px 0 0 0;}
- a.zoom_close {position:absolute; top:2px; left:2px;}
- div#hello p {margin:40px;}
+ body {font-family:Helvetica, Arial, sans-serif;}
+ p {margin:0; padding:0;}
+ #small_box {width:150px; height:100px;}
+ #medium_box {width:300px; height:200px;}
+ #large_box {width:600px; height:400px;}
</style>
</head>
<body>
- <a href="#hello" class="fancy">Click me to zoom</a>
+ <a href="#small_box" id="small">Click me to zoom a small window</a>
+ <div id="small_box">
+ <p>Hello World!</p>
+ </div>
+ <a href="#medium_box" id="medium">Click me to zoom a small window</a>
+ <div id="medium_box">
+ <p>Hello World!</p>
+ </div>
- <div id="hello">
+ <a href="#large_box" id="large">Click me to zoom a small window</a>
+ <div id="large_box">
<p>Hello World!</p>
</div>
View
@@ -1,128 +1,199 @@
-var FancyZoom = Class.create({
- initialize: function(element) {
- this.element = $(element);
- this.zoom = $(this.element.readAttribute('href').gsub(/^#/, ''));
- this.zooming = false;
- this.bg = 'url(images/shadow_round_small.png) no-repeat';
- if (this.element && this.zoom) {
- this.zoom.addClassName('zoom');
- this.zoom.setStyle({
- position : 'absolute',
- margin : '0',
- padding : '0'
- });
- this.zoomWidth = this.zoom.getWidth();
- this.zoomHeight = this.zoom.getHeight();
- this.zoom.hide();
- this.addCloseButton();
- this.element.observe('click', this.zoomIn.bindAsEventListener(this));
- }
- },
-
- addCloseButton: function() {
- var a = new Element('a', {href:'#'});
- var img = new Element('img', {src:'images/closebox.png', alt:'Close'});
- a.appendChild(img);
- this.zoom.appendChild(a);
- this.zoomLink = $(a);
- this.zoomLink.observe('click', this.zoomOut.bindAsEventListener(this)).addClassName('zoom_close');
- $(img).setStyle('border:none');
- },
-
- windowSize: function() {
+function benchmark(func) {
+ var st = new Date().getTime();
+ func.call();
+ var et = new Date().getTime();
+ console.log(func + ': ' + (et-st).toString() + 'ms');
+}
+
+Object.extend(String.prototype, {
+ // if a string doesn't end with str it appends it
+ ensureEndsWith: function(str) {
+ return this.endsWith(str) ? this : this + str;
+ },
+
+ // makes sure that string ends with px (for setting widths and heights)
+ px: function() {
+ return this.ensureEndsWith('px');
+ }
+});
+
+Object.extend(Number.prototype, {
+ // makes sure that number ends with px (for setting widths and heights)
+ px: function() {
+ return this.toString().px();
+ }
+});
+
+var Window = {
+ // returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
+ size: function() {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
return {'width':width, 'height':height, 'x':x, 'y':y}
- },
+ }
+}
-
- zoomIn: function(e) {
- e.stop();
- if (this.zooming) return;
- this.zooming = true;
- var self = this;
- var d = this.windowSize();
- var yOffset = document.viewport.getScrollOffsets()[1];
- var newTop = (d.height/2) - (this.zoomHeight/2) + yOffset;
- var newLeft = (d.width/2) - (this.zoomWidth/2);
- this.curOffset = this.element.cumulativeOffset();
- this.curTop = e ? e.pointerY() : this.curOffset.top + 50;
- this.curLeft = e ? e.pointerX() : this.curOffset.left - 40;
- this.moveX = -(this.curLeft - newLeft);
- this.moveY = -(this.curTop - newTop);
- $$('div.zoom').invoke('hide');
- this.zoom.setStyle({
+Element.addMethods({
+ insertElements: function(element) {
+ var elements = (arguments.length == 2) ? arguments[1] : $A(arguments).slice(1, arguments.length);
+ element = $(element);
+ $A(elements).flatten().each(function(el) { element.insert(el); });
+ return element;
+ }
+});
+
+var FancyZoomBox = {
+ directory : 'images',
+ zooming : false,
+
+ init: function(directory) {
+ if ($('zoom')) { return; }
+ // setup all our elements
+ var img = new Element('img', {src:FancyZoomBox.directory + '/closebox.png', alt:'Close'});
+ var a = new Element('a', {href:'#', title:'Close', id:'zoom_close'});
+ var tl = new Element('td', {'class':'tl'});
+ var tm = new Element('td', {'class':'tm'});
+ var tr = new Element('td', {'class':'tr'});
+ var ml = new Element('td', {'class':'ml'});
+ var mm = new Element('td', {'class':'mm', 'id':'zoom_content_area'});
+ var mr = new Element('td', {'class':'mr'});
+ var bl = new Element('td', {'class':'bl'});
+ var bm = new Element('td', {'class':'bm'});
+ var br = new Element('td', {'class':'br'});
+ var trow = new Element('tr');
+ var mrow = new Element('tr');
+ var brow = new Element('tr');
+ var table = new Element('table', {'id':'zoom_table'});
+ var zoom = new Element('div', {'id':'zoom'});
+ var body = $$('body').first();
+
+ trow.insertElements(tl, tm, tr);
+ mrow.insertElements(ml, mm, mr);
+ brow.insertElements(bl, bm, br);
+ table.insertElements(trow, mrow, brow);
+ a.insert(img);
+ zoom.insertElements(table, a);
+ body.insert(zoom);
+
+ $(table).setStyle('border-collapse:collapse; width:100%; height:100%;');
+ $(tl).setStyle('background:url(' + FancyZoomBox.directory + '/tl.png) no-repeat; width:20px height:20px; overflow:hidden;');
+ $(tm).setStyle('background:url(' + FancyZoomBox.directory + '/tm.png) repeat-x; height:20px; overflow:hidden;');
+ $(tr).setStyle('background:url(' + FancyZoomBox.directory + '/tr.png) no-repeat; width:20px height:20px; overflow:hidden;');
+ $(ml).setStyle('background:url(' + FancyZoomBox.directory + '/ml.png) repeat-y; width:20px; overflow:hidden;');
+ $(mm).setStyle('background:#fff; vertical-align:top; padding:10px;');
+ $(mr).setStyle('background:url(' + FancyZoomBox.directory + '/mr.png) repeat-y; width:20px; overflow:hidden;');
+ $(bl).setStyle('background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px height:20px; overflow:hidden;');
+ $(bm).setStyle('background:url(' + FancyZoomBox.directory + '/bm.png) repeat-x; height:20px; overflow:hidden;');
+ $(br).setStyle('background:url(' + FancyZoomBox.directory + '/br.png) no-repeat; width:20px height:20px; overflow:hidden;');
+ $(img).setStyle('border:none; margin:0; padding:0;');
+ $(a).setStyle('position:absolute; top:0; left:0;').observe('click', FancyZoomBox.out);
+
+ FancyZoomBox.zoom = zoom;
+ FancyZoomBox.zoom_close = a;
+ FancyZoomBox.zoom_content_area = mm;
+ },
+
+ in: function(e) {
+ e.stop();
+ if (FancyZoomBox.zooming) return;
+ FancyZoomBox.zooming = true;
+ var element = e.element();
+ var related_div = element.content_div;
+ var width = related_div.getWidth();
+ var height = related_div.getHeight();
+ var d = Window.size();
+ var yOffset = document.viewport.getScrollOffsets()[1];
+ var newTop = (d.height/2) - (height/2) + yOffset;
+ var newLeft = (d.width/2) - (width/2);
+ FancyZoomBox.curOffset = element.cumulativeOffset();
+ FancyZoomBox.curTop = e ? e.pointerY() : FancyZoomBox.curOffset.top;
+ FancyZoomBox.curLeft = e ? e.pointerX() : FancyZoomBox.curOffset.left;
+ FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
+ FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
+ FancyZoomBox.zoom.hide().setStyle({
position : 'absolute',
- top : this.curTop+'px',
- left : this.curLeft+'px',
- background : this.bg
+ top : FancyZoomBox.curTop.px(),
+ left : FancyZoomBox.curLeft.px()
});
+ FancyZoomBox.zoom_content_area.innerHTML = related_div.innerHTML;
new Effect.Parallel([
- new Effect.Appear(this.zoom, {sync:true}),
- new Effect.Move(this.zoom, {x: this.moveX, y: this.moveY, sync: true}),
- new Effect.Scale(this.zoom, 100, {
+ new Effect.Appear(FancyZoomBox.zoom, {sync:true}),
+ new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX, y: FancyZoomBox.moveY, sync: true}),
+ new Effect.Scale(FancyZoomBox.zoom, 100, {
scaleFrom : 0,
scaleContent : false,
sync : true,
beforeStart: function(effect) {
$(effect.element).setStyle({
- width: self.zoomWidth+'px',
- height: self.zoomHeight+'px'
+ width : width.px(),
+ height : height.px()
});
- self.addBgColorIfIE();
- self.zoom.select('div').invoke('hide');
+ FancyZoomBox.addBgColorIfIE();
},
afterFinish: function(effect) {
- self.removeBgColorIfIE();
- self.zoom.select('div').invoke('show');
- self.zoom.select('a.zoom_close').invoke('hide');
- self.zoomLink.show();
- self.zoom.setStyle({
- width:self.zoomWidth,
- height:self.zoomHeight,
- background:self.bg
- })
- self.zooming = false;
+ FancyZoomBox.removeBgColorIfIE();
+ FancyZoomBox.zoom.show().setStyle({
+ width : width.px(),
+ height : height.px()
+ });
+ FancyZoomBox.zoom_close.show();
+ FancyZoomBox.zooming = false;
}
})
], { duration: 0.3 });
- },
-
- zoomOut: function(e) {
- e.stop();
- if (this.zooming) return;
- this.zooming = true;
- var self = this;
+ },
+
+ out: function(e) {
+ e.stop();
+ if (FancyZoomBox.zooming) return;
+ FancyZoomBox.zooming = true;
new Effect.Parallel([
- new Effect.Move(this.zoom, {x: this.moveX*-1, y: this.moveY*-1, sync: true}),
- new Effect.Scale(this.zoom, 0, {
+ new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
+ new Effect.Scale(FancyZoomBox.zoom, 0, {
scaleFrom : 100,
scaleContent : false,
sync : true,
beforeStart: function(effect) {
- self.addBgColorIfIE();
- self.zoomLink.hide();
- self.zoom.select('div').invoke('hide');
+ FancyZoomBox.addBgColorIfIE();
+ FancyZoomBox.zoom_close.hide();
},
afterFinish: function(effect) {
- self.removeBgColorIfIE();
- self.zoom.select('div').invoke('show');
- self.zooming = false;
+ FancyZoomBox.removeBgColorIfIE();
+ FancyZoomBox.zooming = false;
}
}),
- new Effect.Fade(this.zoom, {sync:true})
+ new Effect.Fade(FancyZoomBox.zoom, {sync:true})
], { duration: 0.5 });
- },
-
- // prevents the thick black border that happens when appearing or fading png in IE
+ },
+
+ // prevents the thick black border that happens when appearing or fading png in IE
addBgColorIfIE: function() {
- if (Prototype.Browser.IE) this.zoom.setStyle({ background: '#fff ' + this.bg });
+ // if (Prototype.Browser.IE) this.zoom.setStyle({ background: '#fff ' + this.bg });
},
removeBgColorIfIE: function() {
- if (Prototype.Browser.IE) this.zoom.setStyle({ background: this.bg });
+ // if (Prototype.Browser.IE) this.zoom.setStyle({ background: this.bg });
+ }
+}
+
+var FancyZoom = Class.create({
+ initialize: function(element) {
+ this.options = arguments.length > 1 ? arguments[1] : {};
+ FancyZoomBox.init();
+
+ this.zoom = $('zoom');
+ this.zoom_table = $('zoom_table');
+
+ this.zoom.hide();
+ this.element = $(element);
+ this.zooming = false;
+ if (this.element && this.zoom) {
+ this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
+ this.element.content_div.hide();
+ this.element.observe('click', FancyZoomBox.in);
+ }
}
});

0 comments on commit 45d8aa4

Please sign in to comment.